.spinner {
--track-width: max(4px, .07em);
--track-color: #80808040;
--indicator-color: #4B49AC;
--speed: 1.5s;

inline-size: 1em;
aspect-ratio: 1;

.spinner__track {
    stroke: var(--track-color);
    transform-origin: 0% 0%;
}

.spinner__indicator {
    stroke: var(--indicator-color);
    stroke-linecap: round;
    stroke-dasharray: 150% 75%;
    animation: spin var(--speed) linear infinite;
}

.spinner__track, .spinner__indicator {
    fill: none;
    stroke-width: var(--track-width);
    r: calc(0.5em - var(--track-width) / 2);
    cx: 0.5em;
    cy: 0.5em;
    transform-origin: 50% 50%;
}
}

@keyframes spin {
0% {
    transform: rotate(0deg);
    stroke-dasharray: 0.05em, 3em;
}
50% {
    transform: rotate(450deg);
    stroke-dasharray: 1.375em, 1.375em;
}
100% {
    transform: rotate(1080deg);
    stroke-dasharray: 0.05em, 3em;
}
}