div.circle-wrap
  - for (var x=1; x<=12; x++)
    div.row
      - for (var y=1; y<=12; y++)
        div.circle

@mixin center {
  display: flex;
  align-items: center;
  justify-content: center;
}
body {
  background-image: linear-gradient(to right, #434343 0%, black 100%);
  background-image: linear-gradient(-225deg, #231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%);
  height: 100vh;
  @include center;
}
.row {
  display: flex;
  .circle {
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    margin: 5px 10px;
    animation: spin 1s linear infinite;
    transform-origin: top center;
  }
}

@for $i from 1 through 12 {
  .row:nth-child(#{$i}) .circle {animation-delay: 100ms * $i}
}

@keyframes spin {
  0% {transform: scale(1.1) rotate(0deg)}
  50% {transform: scale(0.2) rotate(180deg)}
  100% {transform: scale(1.1) rotate(360deg)}
}