Spinner

spinner.css

@keyframes rotateAndClip {
  0% {
    clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 0, 100% 0, 100% 0);
  }
  17% {
    clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
  }
  33% {
    clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  }
  50% {
    clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 0);
  }
  58% {
    clip-path: polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);
  }
  75% {
    clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0);
  }
  92% {
    clip-path: polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);
  }
  100% {
    clip-path: polygon(50% 50%, 0 50%, 0 50%, 0 50%, 0 50%, 0 0);
    rotate: 450deg;
  }
}

.spinner {
  --size: 24px;
  --border-color: violet;

  border-radius: 50%;
  width: var(--size);
  height: var(--size);
  border-style: solid;
  border-width: calc(var(--size) / 6);
  border-color: var(--border-color);
  clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 0, 100% 0, 100% 0);
  animation: rotateAndClip 2s linear infinite;
}