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

Kolor tła:#635684, Plik: 21,3kb

Kolor tła:#9fe2dd, Plik: 69,4kb

Kolor tła:#d1e5f9, Plik: 34,6kb

Kolor tła:#ffdf01, Plik: 54,0kb

Kolor tła:#abdb89, Plik: 100kb

Kolor tła:#ebdae5, Plik: 36,4kb