There is an option on JQuery
very simple.
Using the examples already cited:
JQUERY
$(document).ready(function() {
setTimeout('
$("#preload").fadeOut(100);
', 1500);
});
When the page is completely "read" the div will disappear.
The fadeOut(100)
will cause the div
disappear "smoothly" in 100 milliseconds.
See more about the fadeOut
here: http://api.jquery.com/fadeout/
The count of setTimeout
also in milliseconds, so if you want 1.5 seconds, just multiply by 1000, in case 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;
}
In the background-position
just put center
. The z-index: 99999
, will cause the div
always be above all other page elements as long as they have a z-index
less than "99999".
HTML
<div id="preload"></div>
See the result here: http://jsfiddle.net/SamirChaves/6ns0grm0/2/
http://answall.com/questions/8581/mostrar-gif-enquanto-p%C3%A1gina-carrega
– Lucas
@Lucas friend so this way that Voce sent on the link does not serve to min want so http://ivang-design.com/chronos/videoyt/
– Felipe Henrique
possible duplicate of How to apply a Loading effect before page loading?
– dHEKU
You have not chosen any answer. None satisfies you?
– Jonatas Walker