Make preloader last 5sec

Question

Make preloader last 5sec

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

I would like to know how to make the following preloader last me 5sec before showing me the entire html document.

.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>

I have intended with setTimeout but it does not work for me, probably I will not declare it, forgive me I'm a novice.

I thank you in advance.

javascript jquery html css

asked by Gabriela 13.05.2018 в 04:55

source

2 answers

1

You do not need to add more divs to the html, you can do it with just one and: before And two timers, one for the shutdown and another to eliminate the 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,

answered by 13.05.2018 в 21:33

Mysql Transaction (Mysql) Class App \ Http \ Requests \ TagStoreRequest does not exist

score 2 · Accepted Answer

$(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">

You need part of the loader one more layer that covers all the HTML and above the loader. As it is the label of Jquery, I made you a fragment that I think fills what you are asking.

That it serves you