<div class="preloader">
<div class="circle"></div>
<div class="percent">0%</div>
</div>
<div class="end">Thank you for your patience!</div>

@-webkit-keyframes pulse {
from { -webkit-box-shadow: 0 0 50px #fff; }
50% { -webkit-box-shadow: 0 0 100px #fff; }
to { -webkit-box-shadow: 0 0 50px #fff; }
}
   
.preloader {
position:absolute;
top:50%;
left:50%;
z-index:2;
width:30px;
height:30px;
margin:-15px 0 0 -15px;
background:rgba(0, 0, 0, .2);
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
-webkit-animation-name:pulse;
-webkit-animation-duration:2s;
-webkit-animation-iteration-count:infinite;
}
   
.preloader .percent {
display:block;
position:absolute;
left:50%;
bottom:-50px;
width:100px;
margin-left:-50px;
text-align:center;
font-family:'PT Sans Narrow', sans-serif;
font-size:22px;
color:#fff;
}
   
.preloader .circle {
position:absolute;
top:50%;
left:50%;
width:20px;
height:20px;
margin:-10px 0 0 -10px;
background:#fff;
opacity:0;
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
}
   
.preloader span {
background:#fff;
position:absolute;
width:10px;
height:10px;
}

$(function(){
var preloader = $('.preloader'),
end = $('.end'),
pw = preloader.width(),
percent = preloader.find('.percent'),
circle = preloader.find('.circle'),
l = 8, j = 0;
   
var timer = setInterval(function(){
var p = parseInt((100/l)*j);
for (i=0;i<15;i++){
preloader.append($('<span />'));
}
var span = preloader.find('span');
span.each(function(){
var t = $(this),
x = random(-250, 250),
y = random(-250, 250),
d = random(10, 20),
css = {
top: y,
left: x,
width: d,
height: d,
'-moz-border-radius': d,
'-webkit-border-radius': d,
'border-radius': d,
opacity: .7
},
animation = {
top: pw/2-d/2,
left: pw/2-d/2,
opacity: 0
}
t.css(css).stop(true, true).animate(animation, 900, 'easeInBack', function(){
t.remove();
var css = {
opacity: p/100
}
circle.css(css);
});
});
percent.text(p+'%')
if (p > 99){
clearInterval(timer);
setTimeout(function(){
preloader.fadeOut(400);
end.fadeIn();
}, 1500);
}
j++;
}, 1000);
function random(min, max){
return Math.floor((Math.random()*(max-min+1))+min);
}
});