SOURCE

<div class="loader">
  <div class="b1"></div>
  <div class="b2"></div>
  <div class="b3"></div>
</div>

.loader {
 position:fixed;
  left:0;
  right:0;
  top:0;
  bottom:0;
  background:red;
}
.loader .b1 {
  left:42%;
}
.loader .b2 {
  left:50%;
  animation-delay:80ms;
}
.loader .b3 {
  left:58%;
  animation-delay:160ms
}
.loader .b1, 
.loader .b2,
.loader .b3 {
  width:10px;
  height:20px;
  border-radius:100%;
  background-color:rgba(256,256,256,0.8);
  position:absolute;
  top:50%;
  transform:rotate(0);
  animation-name:spinify;
  animation-duration:1600ms;
  animation-iteration-count:infinite;
}
@keyframes spinify {
  0% {
    transform: translate(0px,0px);
    
  }
  33% {
    transform: translate(0px,24px);
    border-radius:100%;
    width:10px;
    height:10px;
 
  }
   66% {
    transform:translate(0px,-16px);
  }
  
   88% {
    transform:translate(0px,4px);
     
  }
  100% {
    transform:translate(0px,0px);
  }