$animation_speed: 1s;
$number_of_dots: 8;

[class^=dot-] {
  animation: ($animation_speed / 2) ease-in fade-in infinite alternate;
}
@for $i from 1 through $number_of_dots {
  .dot-#{$i} {
    animation-delay: ($animation_speed / $number_of_dots) * ($i - 1);
  }
}




@keyframes fade-in {
    0% { opacity: 0.2; }
  100% { opacity: 1; }
}

.dots {
  margin: 50px auto;
  width: 100px;
  height: 100px;
  position: relative;
}

[class^=dot-] {
  position: absolute;
  left: calc(50% - 10px);
  top: calc(50% - 10px);
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: black;
  transform-origin: -30px 10px;
}
@for $i from 1 through $number_of_dots {
  .dot-#{$i} {
    transform: translateX(40px) rotate(#{($i - 1) * 45}deg);
  }
}