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

:root {
  background: #bbb;
  
  &::before {
    position: absolute;
    font-size: 0.25vmin;
    width: 260em;
    aspect-ratio: 1;
    content: "";
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    animation: spin 2s steps(12,end) infinite;
    background:
      radial-gradient(circle at 230.00em 130.00em, #f0f8 2em, #0000 20em),
      radial-gradient(circle at 216.60em 180.00em, #f0f8 2em, #0000 20em),
      radial-gradient(circle at 180.00em 216.60em, #f0f8 2em, #0000 20em),
      radial-gradient(circle at 130.00em 230.00em, #f0f8 2em, #0000 20em),
      radial-gradient(circle at  80.00em 216.60em, #f0f8 2em, #0000 20em),
      radial-gradient(circle at  43.40em 180.00em, #f0f8 2em, #0000 20em),
      radial-gradient(circle at  30.00em 130.00em, #f0f8 2em, #0000 20em),
      radial-gradient(circle at  43.40em  80.00em, #f0f8 2em, #0000 20em),
      radial-gradient(circle at  80.00em  43.40em, #f0f8 2em, #0000 20em),
      radial-gradient(circle at 130.00em  30.00em, #f0f8 2em, #0000 20em),
      radial-gradient(circle at 180.00em  43.40em, #f0f8 2em, #0000 20em);
  }
  
  &::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);
  }
}