.preloader {
  width: 100%;
  height: 100%;
  background-color: rgb(84, 86, 90);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 300;
  display: flex;
  justify-content: center;
  align-items: center;
}
div.preloader span.loader {
  position: relative;
  width: 75px;
  height: 100px;
  background-repeat: no-repeat;
  background-image:  linear-gradient(rgb(217, 216, 214) 50px, transparent 0),  linear-gradient(rgb(217, 216, 214) 50px, transparent 0),  linear-gradient(rgb(217, 216, 214) 50px, transparent 0),  linear-gradient(rgb(217, 216, 214) 50px, transparent 0),  linear-gradient(rgb(217, 216, 214) 50px, transparent 0);
  background-size: 8px 100%;
  background-position: 0px 90px, 15px 78px, 30px 66px, 45px 58px, 60px 50px;
  animation: pillerPushUp 4s linear infinite;
  -webkit-animation: pillerPushUp 4s linear infinite;
}
.loader::after{
  content: '';
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 10px;
  height: 10px;
  background-color: rgb(229, 39, 119);
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  animation: ballStepUp 4s linear infinite;
  -webkit-animation: ballStepUp 4s linear infinite;
}
@keyframes pillerPushUp {
  0% , 40% , 100%{background-position: 0px 90px, 15px 78px, 30px 66px, 45px 58px, 60px 50px;}
  50% ,  90% {background-position: 0px 50px, 15px 58px, 30px 66px, 45px 78px, 60px 90px;}
}
@keyframes ballStepUp {
  0% { transform: translate(0, 0); -webkit-transform:; -moz-transform:; -ms-transform:; -o-transform:; }
  5% { transform: translate(8px, -14px); -webkit-transform: translate(8px, -14px); -moz-transform: translate(8px, -14px); -ms-transform: translate(8px, -14px); -o-transform: translate(8px, -14px); }
  10% { transform: translate(15px, -10px); -webkit-transform: translate(15px, -10px); -moz-transform: translate(15px, -10px); -ms-transform: translate(15px, -10px); -o-transform: translate(15px, -10px); }
  17% { transform: translate(23px, -24px); -webkit-transform:; -moz-transform:; -ms-transform:; -o-transform:; }
  20% { transform: translate(30px, -20px); -webkit-transform: translate(30px, -20px); -moz-transform: translate(30px, -20px); -ms-transform: translate(30px, -20px); -o-transform: translate(30px, -20px); }
  27% { transform: translate(38px, -34px); -webkit-transform: translate(38px, -34px); -moz-transform: translate(38px, -34px); -ms-transform: translate(38px, -34px); -o-transform: translate(38px, -34px); }
  30% { transform: translate(45px, -30px); -webkit-transform: translate(45px, -30px); -moz-transform: translate(45px, -30px); -ms-transform: translate(45px, -30px); -o-transform: translate(45px, -30px); }
  37% { transform: translate(53px, -44px); -webkit-transform: translate(53px, -44px); -moz-transform: translate(53px, -44px); -ms-transform: translate(53px, -44px); -o-transform: translate(53px, -44px); }
  40% { transform: translate(60px, -40px); -webkit-transform: translate(60px, -40px); -moz-transform: translate(60px, -40px); -ms-transform: translate(60px, -40px); -o-transform: translate(60px, -40px); }
  50% { transform: translate(60px, 0); -webkit-transform: translate(60px, 0); -moz-transform: translate(60px, 0); -ms-transform: translate(60px, 0); -o-transform: translate(60px, 0); }
  57% { transform: translate(53px, -14px); -webkit-transform: translate(53px, -14px); -moz-transform: translate(53px, -14px); -ms-transform: translate(53px, -14px); -o-transform: translate(53px, -14px); }
  60% { transform: translate(45px, -10px); -webkit-transform: translate(45px, -10px); -moz-transform: translate(45px, -10px); -ms-transform: translate(45px, -10px); -o-transform: translate(45px, -10px); }
  67% { transform: translate(37px, -24px); -webkit-transform: translate(37px, -24px); -moz-transform: translate(37px, -24px); -ms-transform: translate(37px, -24px); -o-transform: translate(37px, -24px); }
  70% { transform: translate(30px, -20px); -webkit-transform: translate(30px, -20px); -moz-transform: translate(30px, -20px); -ms-transform: translate(30px, -20px); -o-transform: translate(30px, -20px); }
  77% { transform: translate(22px, -34px); -webkit-transform: translate(22px, -34px); -moz-transform: translate(22px, -34px); -ms-transform: translate(22px, -34px); -o-transform: translate(22px, -34px); }
  80% { transform: translate(15px, -30px); -webkit-transform: translate(15px, -30px); -moz-transform: translate(15px, -30px); -ms-transform: translate(15px, -30px); -o-transform: translate(15px, -30px); }
  87% { transform: translate(7px, -44px); -webkit-transform: translate(7px, -44px); -moz-transform: translate(7px, -44px); -ms-transform: translate(7px, -44px); -o-transform: translate(7px, -44px); }
  90% { transform: translate(0, -40px); -webkit-transform: translate(0, -40px); -moz-transform: translate(0, -40px); -ms-transform: translate(0, -40px); -o-transform: translate(0, -40px); }
  100% { transform: translate(0, 0); -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); }
}