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.
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
Link do código: pastebin.com/XdayJwye
Publicado em: 6 de setembro de 2016