JsFiddle sass Testing

by schrodingers

HTML

<div class="row">
  <div class="dot">
  </div>
  <div class="dot">
  </div>
  <div class="dot">
  </div>
  <div class="dot">
  </div>
  <div class="dot">
  </div>
</div>
<div class="row">
  <div class="dot">
  </div>
  <div class="dot">
  </div>
  <div class="dot">
  </div>
  <div class="dot">
  </div>
  <div class="dot">
  </div>
</div>

SCSS

$n: 6;
.row {
  margin: 1em;  
  width: 100%;
  height: 6em;
  
  /*   display: flex;    
  justify-content: space-around;
  align-items: center; */
}
.row:nth-of-type(2){
  top: 2em;    
  width: 100%;
  height: 6em;
  
}
.dot {
  flex: 3.4em 0 0;
  border-radius: 50%;
  width: 3em;
  height: 3em;
  position: absolute;
}

@for $i from 1 to $n {
  .dot:nth-of-type(#{$i}) {  
    background: hsl(360/16*$i, 70%, 80%);
    animation: ani 500ms ease-in-out alternate infinite;
    animation-delay: 0.15s * $i;
    right: 3em * $i;
  }
}


@keyframes ani {
  from {
    top: 0;
  }
  to {
    top: 5em;
  }
}