Existe um opção em JQuery
bem simples.
Utilizando dos exemplos já citaadoscitados:
JQUERY
$(document).ready(function() {
setTimeout('$'
$("#preload").fadeOut(100);
', 1500);
});
OQuando a página for completamente "lida" a div desaparecerá.
O fadeOut(100)
fará com que a div
desapareça de forma "suave" em 100 milissegundos.
Veja mais acerca do fadeOut
aqui: http://api.jquery.com/fadeout/
A contagem do setTimeout
também é em milissegundos, então se você quer 1,5 segundos, basta multiplicar por 1000, no caso 1500.
CSS
body {
background: #cccccc;
}
.preload {
position: fixed;
z-index: 99999;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
background-color: #fff;
background-image: url('https://38.media.tumblr.com/bec5933eea5043acf6a37bb1394384ab/tumblr_meyfxzwXUc1rgpyeqo1_400.gif');
background-size: 298px 298px;
background-position: center;
background-repeat: no-repeat;
}
No background-position
basta colocar center
. O z-index: 99999
, fará com que a div
sempre esteja acima de todos os outros elementos da página contanto que eles possuam um z-index
inferior a "99999".
HTML
<div id="preload"></div>
Veja o resultado aqui: http://jsfiddle.net/SamirChaves/6ns0grm0/2/