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

.circle {
  height: 40px;
  width: 40px;
  margin: 5px 5px 5px 5px;
  display: inline-block;
  border: 10px #1893E7 solid;
  border-radius: 100px;
  animation: oscillate 3s ease-in-out infinite;
  
  @for $i from 1 through 7 {
    &:nth-child(#{$i}) {
     animation-delay: ( #{sin(.4) * ($i)}s );
    }
} 

}

@keyframes oscillate {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(200px);
  }
}