CSS
body{
background-color: #E8EAF6;
}
.load li{
background-color:#3949AB;
position:absolute;
top:50%;
left:45%;
width:25px;
height:25px;
content:"";
margin:10px 10px;
border-radius:100%;
transform:translate3d(0px,-30px,10px);
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
animation: loading 1.50s ease-in-out infinite alternate;
}
.load li:nth-child(2){
background-color:#e74c3c;
left:50%;
animation: loading1 1.50s ease-in-out infinite alternate;
animation-delay:0.4s;
}
.load li:nth-child(3){
background-color:#f1c40f;
left:55%;
animation: loading2 1.50s ease-in-out infinite alternate;
animation-delay:0.8s;
}
.load li:nth-child(4){
background-color:#2ecc71;
left:60%;
animation: loading3 1.50s ease-in-out infinite alternate;
animation-delay:1.2s;
}
@keyframes loading {
to {
transform:translate3d(0,30px,10px);
box-shadow: 10px 10px 30px #3498db, 0 10px 20px #3498db ;
}
}
@keyframes loading1{
to {
transform:translate3d(0,30px,10px);
box-shadow: 10px 10px 30px #bd081c, 0 10px 20px #bd081c;
}
}
@keyframes loading2 {
to {
transform:translate3d(0,30px,10px);
box-shadow: 10px 10px 30px #f39c12, 0 10px 20px #f39c12;
}
}
@keyframes loading3 {
to {
transform:translate3d(0,30px,10px);
box-shadow: 10px 10px 30px #27ae60, 0 10px 20px #27ae60;
}
}
