Tela de carregamento com css

Por: Jorge Eduardo Sato

Vou ensinar vocês a criar uma tela de carregamento com css para sites, igual esse da mobi mkt, ele exibe o loading até o carregamento total dos scripts do site.
Ou seja, não vai ficar aquele site feio quando você abre e ele vai montando tipo um quebra cabeça, isso é um pouco desagradável para o usuário do site.

Criando o script da tela de carregamento

Primeiro Passo
Vamos criar o nosso css:

#loader{
  z-index: 999999;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('carregando.gif') 50% 50% no-repeat #FFF;
}

Segundo Passo
Vamos agora criar o javascript:

$(window).load(function(){
    $("#loader").fadeOut("slow");
});

Terceiro passo
Agora a div que vai executar o script loader é a div

id=loader

você pode inserir ela antes do “body” que ela irá executar em todas as páginas do seu site.
caso contrário insira essa div somente nas páginas que deseja executar o carregamento.

Imagem gif de carregamento
carregando
Link do código: pastebin.com/XdayJwye