Preloader Teqnologik

by Danilo Metzker

HTML

<div class="loading">
  <div class="leftball"></div>
  <div class="rightball"></div>
</div>

CSS

body{
  background:#fff;
}
.loading{
  position:absolute;
  width:150px;
  height:50px;
  background:rgba(0,0,0,0.0);
  top:calc(50% - 25px);
  left:calc(50% - 75px);
  border-radius:100px; 
}

.leftball{
  position:absolute;
  width:40px;
  height:40px;
  background:#2C82C9;
  border-radius:100px;
  left:5px;
  top:calc(50% - 20px);
  animation: LeftBall 1s infinite;
}

.rightball{
  position:absolute;
  width:40px;
  height:40px;
  background:#00D717;
  border-radius:100px;
  right:5px;
  top:calc(50% - 20px);
  animation: RightBall 1s infinite;
}

@keyframes LeftBall{
  0%{
    left:5px;
  }
  50%{
    left:105px;
  }
  
  100%{
    left:5px;
  }
}

@keyframes RightBall{
  0%{
    right:5px;
  }
  50%{
    right:105px;
  }
  
  100%{
    right:5px;
  }
}