@keyframes spin {
  0% { rotate: 0deg; }
  100% { rotate: 360deg; }
}

:root {
  background: #f00;
  
  &::before {
    position: absolute;
    font-size: 0.25vmin;
    width: 260em;
    aspect-ratio: 1;
    content: "";
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    animation: spin 2s steps(20,end) infinite;
    background:
      radial-gradient(circle at 230.00em 130.00em, #fff 13em, #0000 calc(13em + 1px)),
      radial-gradient(circle at 225.11em 160.90em, #666 13em, #0000 calc(13em + 1px)),
      radial-gradient(circle at 210.90em 188.78em, #666 13em, #0000 calc(13em + 1px)),
      radial-gradient(circle at 188.78em 210.90em, #666 13em, #0000 calc(13em + 1px)),
      radial-gradient(circle at 160.90em 225.11em, #666 13em, #0000 calc(13em + 1px)),
      radial-gradient(circle at 130.00em 230.00em, #666 13em, #0000 calc(13em + 1px)),
      radial-gradient(circle at  99.10em 225.11em, #666 13em, #0000 calc(13em + 1px)),
      radial-gradient(circle at  71.22em 210.90em, #666 13em, #0000 calc(13em + 1px)),
      radial-gradient(circle at  49.10em 188.78em, #666 13em, #0000 calc(13em + 1px)),
      radial-gradient(circle at  34.89em 160.90em, #666 13em, #0000 calc(13em + 1px)),
      radial-gradient(circle at  30.00em 130.00em, #999 13em, #0000 calc(13em + 1px)),
      radial-gradient(circle at  34.89em  99.10em, #666 13em, #0000 calc(13em + 1px)),
      radial-gradient(circle at  49.10em  71.22em, #666 13em, #0000 calc(13em + 1px)),
      radial-gradient(circle at  71.22em  49.10em, #666 13em, #0000 calc(13em + 1px)),
      radial-gradient(circle at  99.10em  34.89em, #666 13em, #0000 calc(13em + 1px)),
      radial-gradient(circle at 130.00em  30.00em, #666 13em, #0000 calc(13em + 1px)),
      radial-gradient(circle at 160.90em  34.89em, #666 13em, #0000 calc(13em + 1px)),
      radial-gradient(circle at 188.78em  49.10em, #666 13em, #0000 calc(13em + 1px)),
      radial-gradient(circle at 210.90em  71.22em, #666 13em, #0000 calc(13em + 1px)),
      radial-gradient(circle at 225.11em  99.10em, #666 13em, #0000 calc(13em + 1px));
  }
  
  &::after {
    content: "";
    position: absolute;
    font-size: 0.25vmin;
    width: 10em;
    aspect-ratio: 1;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    background:
      linear-gradient(90deg, #0000 45%, #000 0 55%, #0000 0),
      linear-gradient(#0000 45%, #000 0 55%, #0000 0);
  }
}