Css only spinner, stolen from 37signals

example.html

<div class="spinner"></div>

spinner.css

.spinner {
  position: relative;

  &::before {
    --mask: no-repeat radial-gradient(#000 68%, #0000 71%);
    --dot-size: 1.25em;

    -webkit-mask: var(--mask), var(--mask), var(--mask);
    -webkit-mask-size: 28% 45%;
    animation: submitting 1.3s infinite linear;
    aspect-ratio: 8/5;
    background: currentColor;
    content: "";
    inline-size: var(--dot-size);
    inset: 50% 0.25em;
    margin-block: calc((var(--dot-size) / 3) * -1);
    margin-inline: calc((var(--dot-size) / 2) * -1);
    position: absolute;
  }
}

@keyframes submitting {
  0% {
    -webkit-mask-position: 0% 0%, 50% 0%, 100% 0%;
  }
  12.5% {
    -webkit-mask-position: 0% 50%, 50% 0%, 100% 0%;
  }
  25% {
    -webkit-mask-position: 0% 100%, 50% 50%, 100% 0%;
  }
  37.5% {
    -webkit-mask-position: 0% 100%, 50% 100%, 100% 50%;
  }
  50% {
    -webkit-mask-position: 0% 100%, 50% 100%, 100% 100%;
  }
  62.5% {
    -webkit-mask-position: 0% 50%, 50% 100%, 100% 100%;
  }
  75% {
    -webkit-mask-position: 0% 0%, 50% 50%, 100% 100%;
  }
  87.5% {
    -webkit-mask-position: 0% 0%, 50% 0%, 100% 50%;
  }
  100% {
    -webkit-mask-position: 0% 0%, 50% 0%, 100% 0%;
  }
}