#preloader{
    position:relative;
    margin: 20px 45%;
}
#preloader span{
    position:absolute;
    width:20px;
    height:20px;
    background:#3498db;
    opacity:0.5;
	border-radius:20px;
    animation: preloader 1s infinite ease-in-out;
}
#preloader span:nth-child(2){
    left:20px;
    animation-delay: .2s;
}
#preloader span:nth-child(3){
    left:40px;
    animation-delay: .4s;
}
#preloader span:nth-child(4){
    left:60px;
    animation-delay: .6s;
}
#preloader span:nth-child(5){
    left:80px;
    animation-delay: .8s;
}
@keyframes preloader {
    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:#000;  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);}
}