SOURCE

<div class="scrollload-bottom">
  <div style="height: 50px;">
    <div class="sl-ld">
      <div class="sl-ld-ball sl-ld-ball-anim">
      </div>
      <div class="sl-ld-ball sl-ld-ball-anim">
      </div>
    </div>
  </div>
</div>

 @-webkit-keyframes sl-ld-ball-anim1 {
   0% {
     z-index: 1;
     -webkit-transform: translate3d(-18px, 0, 0);
     transform: translate3d(-18px, 0, 0)
   }
   50% {
     -webkit-transform: translate3d(18px, 0, 0);
     transform: translate3d(18px, 0, 0)
   }
   to {
     z-index: 2;
     -webkit-transform: translate3d(-18px, 0, 0);
     transform: translate3d(-18px, 0, 0)
   }
 }
 
 @keyframes sl-ld-ball-anim1 {
   0% {
     z-index: 1;
     -webkit-transform: translate3d(-18px, 0, 0);
     transform: translate3d(-18px, 0, 0)
   }
   50% {
     -webkit-transform: translate3d(18px, 0, 0);
     transform: translate3d(18px, 0, 0)
   }
   to {
     z-index: 2;
     -webkit-transform: translate3d(-18px, 0, 0);
     transform: translate3d(-18px, 0, 0)
   }
 }
 
 @-webkit-keyframes sl-ld-ball-anim2 {
   0% {
     z-index: 2;
     -webkit-transform: translate3d(18px, 0, 0);
     transform: translate3d(18px, 0, 0)
   }
   50% {
     -webkit-transform: translate3d(-18px, 0, 0);
     transform: translate3d(-18px, 0, 0)
   }
   to {
     z-index: 1;
     -webkit-transform: translate3d(18px, 0, 0);
     transform: translate3d(18px, 0, 0)
   }
 }
 
 @keyframes sl-ld-ball-anim2 {
   0% {
     z-index: 2;
     -webkit-transform: translate3d(18px, 0, 0);
     transform: translate3d(18px, 0, 0)
   }
   50% {
     -webkit-transform: translate3d(-18px, 0, 0);
     transform: translate3d(-18px, 0, 0)
   }
   to {
     z-index: 1;
     -webkit-transform: translate3d(18px, 0, 0);
     transform: translate3d(18px, 0, 0)
   }
 }
 
 .sl-ld {
   position: relative;
   width: 0;
   margin: 0 auto;
   height: 50px
 }
 
 .sl-ld-ball {
   width: 16px;
   height: 16px;
   border-radius: 50%;
   position: absolute;
   top: 17px;
   left: -8px
 }
 
 .sl-ld-ball:first-of-type {
   -webkit-transform: translate3d(-18px, 0, 0);
   transform: translate3d(-18px, 0, 0);
   background: #0462dc;
   z-index: 1
 }
 
 .sl-ld-ball:nth-of-type(2) {
   -webkit-transform: translate3d(18px, 0, 0);
   transform: translate3d(18px, 0, 0);
   background: #fc0284;
   z-index: 2
 }
 
 .sl-ld-ball-anim:first-of-type {
   -webkit-animation: sl-ld-ball-anim1 1.2s linear infinite;
   animation: sl-ld-ball-anim1 1.2s linear infinite
 }
 
 .sl-ld-ball-anim:nth-of-type(2) {
   -webkit-animation: sl-ld-ball-anim2 1.2s linear infinite;
   animation: sl-ld-ball-anim2 1.2s linear infinite
 }