Custom preloader effect

HTML

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

CSS

@-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;
}

JavaScript

jQuery Easing Plugin (version 1.3) is required!

$(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);
	}

	
});