div.preloader{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  
  z-index: 100;
}

div.preloader ul{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  display: flex;
  padding: 0;
  margin: 0;
}
div.preloader ul li{
  list-style: none;
  width: 20px;
  height: 20px;
  background-color: rgb(0,145,222);
  border-radius: 50%;
  margin: 0 5px;
  animation: animate-dots 1.4s linear infinite;
}
@keyframes animate-dots {
  0%{
    transform: translateX(0px);
  }
  60%{
    transform: translateX(0px);
  }
  80%{
    transform: translateX(-20px);
  }
  100%{
    transform: translateX(0px);
  }
}
div.preloader ul li:nth-child(1){
  animation-delay: -1.4s
}
div.preloader ul li:nth-child(2){
  animation-delay: -1.2s
}
div.preloader ul li:nth-child(3){
  animation-delay: -1.0s
}
div.preloader ul li:nth-child(4){
  animation-delay: -0.8s
}
div.preloader ul li:nth-child(5){
  animation-delay: -0.6s
}