Pré loader é um animação que informa ao usuário que o site está carregando o conteúdo de uma requisição. Este recurso elimina aquelas páginas brancas enquanto o site carrega, tornando a experiência de navegação no site mais agradável, isto é, user friendly.

Lógica

Para fazermos um preloader é necessário colocar uma div que cubra toda a extensão da body antes do disparo do evento onload no objeto window. Para fazer isto coloca-se o conteúdo html do preloader logo após a tag e o css respectivo logo nas primeiras linha do primeiro arquivo css chamado pela página (ou na própria página), já o javascript coloca-se no final da página (ex: no arquivo footer da aplicação). Então no primeiro momento a body ficaria assim.

HTML respectivo do nosso preloader

<body>
    <!-- início do preloader -->
    <div id="preloader">
        <div class="inner">
           <!-- HTML DA ANIMAÇÃO MUITO LOUCA DO SEU PRELOADER! -->
           <div class="bolas">
              <div></div>
              <div></div>
              <div></div>                    
           </div>
        </div>
    </div>
    <!-- fim do preloader -->  
</body>

O evento onload

O evento onload do javascript ocorre quando um objeto é totalmente carregado clique aqui e saiba mais, se usarmos o evento onload no objeto window temos disponível o momento oportuno para remover nossa animação de carregamento.

Então o javascript do pre loader ficaria assim:

    //<![CDATA[
    $(window).on('load', function () {
        $('#preloader .inner').fadeOut();
        $('#preloader').delay(350).fadeOut('slow'); 
        $('body').delay(350).css({'overflow': 'visible'});
    })
    //]]>

Comentários

O CSS

Na parte do CSS não tem mistério. Existe uma div externa (#preloader) que se orienta por position: fixed e uma div interna (.inner) que tem seu posicionamento centralizado dentro da sua div mãe. Tudo que estiver dentro de .inner ficará centralizado na página. Então dentro de .inner fica a animação CSS (pode ser qualquer coisa). Usamos uma animação CSS, mas poderia ser um GIF (das antigas) ou um SVG (moderninho) ou talvez até um canvas (+ moderninho ainda).

body {
  overflow: hidden; 
}

/* ini: Preloader */

#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#F27620; /* cor do background que vai ocupar o body */
    z-index:999; /* z-index para jogar para frente e sobrepor tudo */
}
#preloader .inner {
    position: absolute;
    top: 50%; /* centralizar a parte interna do preload (onde fica a animação)*/
    left: 50%;
    transform: translate(-50%, -50%);  
}
.bolas > div {
  display: inline-block;
  background-color: #fff;
  width: 25px;
  height: 25px;
  border-radius: 100%;
  margin: 3px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-name: animarBola;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  
}
.bolas > div:nth-child(1) {
    animation-duration:0.75s ;
    animation-delay: 0;
}
.bolas > div:nth-child(2) {
    animation-duration: 0.75s ;
    animation-delay: 0.12s;
}
.bolas > div:nth-child(3) {
    animation-duration: 0.75s  ;
    animation-delay: 0.24s;
}

@keyframes animarBola {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  16% {
    -webkit-transform: scale(0.1);
    transform: scale(0.1);
    opacity: 0.7;
  }
  33% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1; 
  } 
}
/* end: Preloader */

Sobre a animação CSS

A animação css do pre loader é um conjunto de três bolas, que se encolhem ao longo do tempo usando a propriedade transform com a função scale. para conseguir o efeito desejado cada bola encolhe em um tempo através de um delay, a primeira bola não tem delay, a segunda tem um delay x e a terceira um delay 2x.

Conclusão

Os pre loaders (ou pré carregadores) são recursos de interface interessantes para se usar nas interfaces das aplicações web, uma vez que permitem informar ao usuário o que está acontecendo. Muitas vezes o design da aplicação exige um pre loader, por exemplo: Um site em que as imagens possuem um forte impacto visual ou que a estrutura ficaria estranha se as imagens carregassem depois do restante do conteúdo.

Para ver como o nosso pre loader ficou clique no botão abaixo:
DEMO ONLINE