.loader {
  width: 40px;

  aspect-ratio: 1;
  --c: linear-gradient(#000 0 0);
  --m: radial-gradient(farthest-side, #000 90%, #0000);
  background: var(--c), var(--m), var(--c);
  background-size: 16px 8px, 10px 10px;
  background-repeat: no-repeat;
  animation: l20-1 1s infinite linear, l20-2 4s infinite linear -0.4s;
}
@keyframes l20-1 {
  0%,
  10% {
    background-position: calc(50% - 8px) 50%, 50% -15px, calc(50% + 8px) 50%;
  }
  33% {
    background-position: -20px 50%, 50% 50%, calc(100% + 20px) 50%;
  }
  66% {
    background-position: -20px 50%, 50% calc(100% + 15px), calc(100% + 20px) 50%;
  }
  80%,
  100% {
    background-position: calc(50% - 8px) 50%, 50% calc(100% + 15px),
      calc(50% + 8px) 50%;
  }
}
@keyframes l20-2 {
  0%,
  24.99% {
    transform: rotate(0);
  }
  25%,
  49.99% {
    transform: rotate(90deg);
  }
  50%,
  74.99% {
    transform: rotate(180deg);
  }
  75%,
  100% {
    transform: rotate(270deg);
  }
}