I need a GIF to work while the page loads. I already tried a few ways but none worked. And when the page load appears Done! . More or less as happens on this site .
I need a GIF to work while the page loads. I already tried a few ways but none worked. And when the page load appears Done! . More or less as happens on this site .
In fact, what happens on this site is that it places content on top of a DIV that covers everything and once content is loaded ( document.load
) it hides the DIV with a fadeOut
effect.
Reframe this in JSFiddle to make it easier (though you'll see the effect on your page better) .
HTML
<div id="preloader"><h1>CARREGANDO</h1></div>
<div id="conteudo">
<img src="http://3rdbillion.net/wp-content/uploads/2013/11/d6c7c50b9b49412a2ad9f847dcbaeeba13.jpg"></div>
CSS
body{background:#000;}#preloader{position:absolute;left:0px;right:0px;bottom:0px;top:0px;background:#ccc;}
JavaScript
$(document).ready(function(){//Escondepreloader$(window).load(function(){$('#preloader').fadeOut(1500);//1500éaduraçãodoefeito(1.5seg)});});
Inplaceof"uploading" just put your <img>
tag with a GIF you want. Although it is possible to do a simple animation with CSS3 so you do not need to use an image.