<div class="parent">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

html {
  color-scheme: dark light;
}
body {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.parent {
  margin-top: 50px;
  width: 200px;
  aspect-ratio: 1;
  position: relative;
}

.circle {
  --size: 25px;
  width: var(--size);
  aspect-ratio: 1;
  border-radius: 50%;
  position: absolute;
  top: 0;

  @media screen and (max-width: 580px) {
    --size: 15px;
  }
}

// in this CSS pane, go to the down arrow icon
// and select "view compiled css" to see the
// CSS instead of the Sass
$colors: (
  #ff5733,
  #ffbd33,
  #33ff57,
  #33a1ff,
  #b933ff,
  #ff33a1,
  #33ffbd,
  #338aff,
  #ff3333,
  #33ffa1,
  #a1ff33,
  #ff33bd
);
@for $i from 1 through length($colors) {
  .circle:nth-of-type(#{$i}) {
    background-color: nth($colors, $i);
    border: 1px solid rgb(0, 0, 0, 0.2);
    animation: rotate ease-in-out infinite alternate;
    animation-delay: #{$i *
      0.1}s; // Adjust the delay to control the spacing between animations
    animation-duration: 2s; // Adjust the duration as needed for the speed of rotation
    transform-origin: center; // Rotate from the center of each circle
    left: #{$i * 20}px;
  }
}

@keyframes rotate {
  0% {
    top: 0;
  }
  50% {
    top: 100%;
  }
  100% {
    top: -100%;
  }
}