Красивый загрузчик сайта

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>  
  <script src="jquery.easing.js" type="text/javascript"></script>

<div class="preloader">  
  <div class="circle"></div>  
  <div class="percent">0%</div>  
  </div>  
  <div class="end">Это то, что должно загрузиться</div>

<script type="text/javascript">  
  $(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),  
  w = (150*p)/100;  

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

  });  
  </script>

<script src="init.js" type="text/javascript"></script>

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