Show GIF while page loads

14

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 .

    
asked by anonymous 08.03.2014 / 18:57

1 answer

16

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.

    
08.03.2014 / 19:42