<div id='loader'>
<div class='balls'></div>
<div class='balls'></div>
<div class='balls'></div>
<div class='balls'></div>
</div>
<script type='text/javascript'>
$(window).load(function () {
setTimeout(function () {
$(".balls").fadeOut("slow");
setTimeout(function () {
$("#loader").fadeOut("slow")
}, 1000)
}, 1000)
});
</script>


<style>
#loader{
position:fixed;top:0;left:0;right:0;bottom:0;background-color:#FFB3B4;z-index:1000
}
.balls{position:absolute;
width:100px;
height:100px;
border-radius:100%;
position:absolute;
border: 1px solid red;
animation: up 1s;
animation-iteration-count: infinite;
transition:2s;
border-bottom:none;
border-right:none;
animation-timing-function:linear;
margin-left: -70px;
margin-top: -70px;
left:50%;
top:50%;
}
.balls:nth-child(1){
width:90px;
height:90px;
left:50.35%;
top:50.7%;
animation-delay:.2s;
}.balls:nth-child(2){
width:80px;
height:80px;
left:50.70%;
top:51.4%;
animation-delay:.4s;
}.balls:nth-child(3){
width:80px;
height:80px;
left:50.70%;
top:51.4%;
animation-delay:.4s;
}.balls:nth-child(4){
width:70px;
height:70px;
left:51.05%;
top:52.1%;
animation-delay:.6s;
}
.balls:nth-child(5){
width:60px;
height:60px;
left:51.40%;
top:52.8%;
animation-delay:.8s;
}
@keyframes up{
from{transform:rotate(0deg); }
50%{transform:rotate(180deg);}
100%{transform:rotate(360deg);}
}}
</style>