Skip to main content
adicionou 158 caracteres ao conteúdo
Fonte Link
Samir Braga
  • 10,1mil
  • 6
  • 33
  • 54

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/

Existe um opção em JQuery bem simples.
Utilizando dos exemplos já citaados:

JQUERY

$(document).ready(function() {
  setTimeout('$("#preload").fadeOut(100)', 1500);
});

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>

Existe um opção em JQuery bem simples.
Utilizando dos exemplos já citados:

JQUERY

$(document).ready(function() {
  setTimeout('
              $("#preload").fadeOut(100);
  ', 1500);
});

Quando 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/

Fonte Link
Samir Braga
  • 10,1mil
  • 6
  • 33
  • 54

Existe um opção em JQuery bem simples.
Utilizando dos exemplos já citaados:

JQUERY

$(document).ready(function() {
  setTimeout('$("#preload").fadeOut(100)', 1500);
});

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>