Pre loader

HTML:

<div id="preloader">
</div>

CSS:
#preloader {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99999999;
    width: 100%;
    height: 100%;
    overflow: visible;
     background: #fff url('../images/loader.gif') no-repeat center center;
 }

JS:

jQuery(document).ready(function($) {
// site preloader -- also uncomment the div in the header and the css style for #preloader
  $(window).load(function(){
    $('#preloader').delay(2000).fadeOut('slow',function(){$(this).remove();});
  });
});

For creative Preloader : Click Here