Loader

HTML

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS

ul {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    list-style: none;
    width: 440px;
}
ul:after{
    content: '';
    display: block;
    clear: both;
}
ul li {
    position: relative;
    width: 60px;
    height: 60px;
    background: linear-gradient(#286ba5, #2a3d71);
    border-radius: 50%;
    margin: 10px;
    float: left;
    box-shadow: 0 30px 10px rgba(0,0,0,0.1);
}
ul li:nth-child(1){animation: animate 1s linear infinite;}
ul li:nth-child(2){animation: animate 1s .1s linear infinite;}
ul li:nth-child(3){animation: animate 1s .3s linear infinite;}
ul li:nth-child(4){animation: animate 1s .5s linear infinite;}
ul li:nth-child(5){animation: animate 1s .7s linear infinite;}

@keyframes animate {
    0%{top: 0; box-shadow: 0 100px 10px -20px rgba(0,0,0,0.1);}
    50%{top: 80px; box-shadow: 0 10px 5px 0 rgba(0,0,0,0.2);}
    100%{top: 0; box-shadow: 0 100px 10px -20px rgba(0,0,0,0.1);}
}