.spinner {
  flex: 1 1 auto;
  height: 1em;
  width: 1em;
}

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

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

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

@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;
  }
}