Edit in JSFiddle

<p>CSS PRELOADERS</p>
<div id="preloader_4">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>

*{ margin:30px}
p{ color:#fff; font-family:arial}
body{ background:#000;}
#preloader_4{
    position:relative;
}
#preloader_4 span{
    position:absolute;
    width:20px;
    height:20px;
    background:#3498db;
    opacity:0.5;
border-radius:20px;
-webkit-animation: preloader_4 1s infinite ease-in-out;
-moz-animation: preloader_4 1s infinite ease-in-out;
animation: preloader_4 1s infinite ease-in-out;
 
}
#preloader_4 span:nth-child(2){
    left:20px;
    -webkit-animation-delay: .2s;
    -moz-animation-delay: .2s;
    animation-delay: .2s;
}
#preloader_4 span:nth-child(3){
    left:40px;
    -webkit-animation-delay: .4s;
    animation-delay: .4s;
}
#preloader_4 span:nth-child(4){
    left:60px;
    -webkit-animation-delay: .6s;
    animation-delay: .6s;
}
#preloader_4 span:nth-child(5){
    left:80px;
    -webkit-animation-delay: .8s;
    animation-delay: .8s;
}
@-webkit-keyframes preloader_4 {
    0% {opacity: 0.3; transform:translateY(0px);    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
    50% {opacity: 1; transform: translateY(-10px); background:#f1c40f;  box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);}
    100%  {opacity: 0.3; transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
}
@keyframes preloader_4 {
    0% {opacity: 0.3; transform:translateY(0px);    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
    50% {opacity: 1; transform: translateY(-10px); background:#f1c40f;  box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);}
    100%  {opacity: 0.3; transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
}