Pre-loader podczas wczytywania strony:

Wstawiamy w HTML'u zaraz po BODY
dwie warstwy: 

‹div id="preloader"›‹div id="loader"›‹/div›‹/div›

Style CSS3

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #EEE; 
  z-index: 10000;
  -webkit-animation-name: prehide;
  animation-name: prehide;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes prehide {
  from {opacity: 1;}
  to {opacity:0;display:none;
  -webkit-animation-play-state:paused;}
}
@keyframes prehide {
  from {opacity: 1;}
  to {opacity:0;display:none;
  -webkit-animation-play-state:paused;}
}
#loader {
  width: 400px;
  height: 300px;
  position: absolute;
  left: 50%; 
  top: 50%;
  margin: -200px 0 0 -150px;
  background: transparent url('loader.gif') 0 0 no-repeat;
} 

Kod JQuery

$('body').css({'overflow':'hidden'});
$(window).load(function(){
  $('#loader').fadeOut();
  $('#preloader').delay(350).fadeOut(function(){
    $('body').delay(350).css({'overflow':'visible'});
  });
});