1

quisiera saber como hacer par que el preloader siguiente me dure 5seg antes de mostrarme todo el documento html.

.preload {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  margin: -42px 0 0 -12px;
  background: #C60B09;
  transform: rotate(45deg);
  animation: spin 1s infinite linear;
}
@keyframes spin {
	0% { -webkit-transform:rotate(0deg); }
	100% { -webkit-transform:rotate(360deg); }
}
<div class="preload"></div>

he intencionado con setTimeout pero no me funciona, probablemente no se declararlo, perdóneme soy novata.

Agradezco de antemano.

2 respuestas 2

2

$(function(){ //Cuando está listo el documento

  setTimeout(function(){ 
  $('.preload').hide('fast'); //ocultar el loader
  $('#foo').removeClass('cover');//quitar el cover
  }, 5000);//Después de 5s ocultar el preload
  
});
.preload {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  margin: -42px 0 0 -12px;
  background: #C60B09;
  transform: rotate(45deg);
  animation: spin 1s infinite linear;
  z-index: 10;
}
@keyframes spin {
	0% { -webkit-transform:rotate(0deg); }
	100% { -webkit-transform:rotate(360deg); }
}

.cover{
  min-width: 100vw;
  min-height: 100vh;
  background-color: #eaeaea;
  z-index: 9;
  position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="preload"></div>
<div class="cover" id="foo"></div>

<h1>Inicio de mi página</h1>
<input type="text">
<input type="text">
<input type="text">

Necesitas a parte del loader una capa más que cubra todo el HTML y encima el loader. Como está la etiqueta de Jquery, te hice un fragmento que creo llena lo que estás preguntando.

Que te sirva

1

No necesitas añadir mas divs al html, puedes hacerlo con uno solo y :before Y dos temporizadores, uno para el apagado y otro para eliminar el div.

$(function(){
setTimeout(function(){ 
$("#preload").addClass("out");
}, 5000);
setTimeout(function(){ 
$("#preload").remove();
}, 6000);
});
#preload{
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background:#fff;
  transition:opacity linear 1s;
}
#preload:before{
  content:"";
  position: absolute;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  width: 60px;
  height: 60px;
  background: #C60B09;
  transform: rotate(45deg);
  animation: spin 1s infinite linear;
}
#preload.out{
opacity:0;
}
@keyframes spin {
	0% { -webkit-transform:rotate(0deg); }
	100% { -webkit-transform:rotate(360deg); }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="preload"></div>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, 

1
  • Si, realmente estaba incompleta la respuesta, corrijo
    – Montaycabe
    Commented el 13 may. 2018 a las 19:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.