Skip to main content
adicionou 2 caracteres ao conteúdo
Fonte Link
Neuber Oliveira
  • 2,5mil
  • 9
  • 17

O que eu tentei explicar no comentario é isso.

var loaded = false;
window.setTimeout(function(){
  if(loaded==false){
    //exibe o loading aqui
    console.log('demorou para carregar');
    $(".se-pre-con").fadeIn("fast");
  }
}, 2000);

$(window).load(function() {
  //loaded = true;
  console.log('terminou de carregar');
  //esconde o loading
  $(".se-pre-con").fadeOut("fast");
});
.se-pre-con {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url(https://media0.giphy.com/media/3oEjI6SIIHBdRxXI40/200_s.gif) center no-repeat #FFFFFF;
}
.se-pre-con p {
  width: 160px;
  height: 15px;
  position: absolute;
  top: 70%;
  left: 48%;
  margin-top: -70px;
  margin-left: -48px;
}

.hide {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


<!-- Loading -->
<div class="se-pre-con hide"><p>PROCESSANDO DADOS</p></div>



blablablablablalba<br>blablablablablalba<br>blablablablablalba<br>blablablablablalba<br>blablablablablalba<br>blablablablablalba<br>blablablablablalba<br>blablablablablalba<br>

O que eu tentei explicar no comentario é isso.

var loaded = false;
window.setTimeout(function(){
  if(loaded==false){
    //exibe o loading aqui
    console.log('demorou para carregar');
    $(".se-pre-con").fadeIn("fast");
  }
}, 2000);

$(window).load(function() {
  loaded = true;
  console.log('terminou de carregar');
  //esconde o loading
  $(".se-pre-con").fadeOut("fast");
});
.se-pre-con {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url(https://media0.giphy.com/media/3oEjI6SIIHBdRxXI40/200_s.gif) center no-repeat #FFFFFF;
}
.se-pre-con p {
  width: 160px;
  height: 15px;
  position: absolute;
  top: 70%;
  left: 48%;
  margin-top: -70px;
  margin-left: -48px;
}

.hide {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


<!-- Loading -->
<div class="se-pre-con hide"><p>PROCESSANDO DADOS</p></div>



blablablablablalba<br>blablablablablalba<br>blablablablablalba<br>blablablablablalba<br>blablablablablalba<br>blablablablablalba<br>blablablablablalba<br>blablablablablalba<br>

O que eu tentei explicar no comentario é isso.

var loaded = false;
window.setTimeout(function(){
  if(loaded==false){
    //exibe o loading aqui
    console.log('demorou para carregar');
    $(".se-pre-con").fadeIn("fast");
  }
}, 2000);

$(window).load(function() {
  //loaded = true;
  console.log('terminou de carregar');
  //esconde o loading
  $(".se-pre-con").fadeOut("fast");
});
.se-pre-con {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url(https://media0.giphy.com/media/3oEjI6SIIHBdRxXI40/200_s.gif) center no-repeat #FFFFFF;
}
.se-pre-con p {
  width: 160px;
  height: 15px;
  position: absolute;
  top: 70%;
  left: 48%;
  margin-top: -70px;
  margin-left: -48px;
}

.hide {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


<!-- Loading -->
<div class="se-pre-con hide"><p>PROCESSANDO DADOS</p></div>



blablablablablalba<br>blablablablablalba<br>blablablablablalba<br>blablablablablalba<br>blablablablablalba<br>blablablablablalba<br>blablablablablalba<br>blablablablablalba<br>

Fonte Link
Neuber Oliveira
  • 2,5mil
  • 9
  • 17

O que eu tentei explicar no comentario é isso.

var loaded = false;
window.setTimeout(function(){
  if(loaded==false){
    //exibe o loading aqui
    console.log('demorou para carregar');
    $(".se-pre-con").fadeIn("fast");
  }
}, 2000);

$(window).load(function() {
  loaded = true;
  console.log('terminou de carregar');
  //esconde o loading
  $(".se-pre-con").fadeOut("fast");
});
.se-pre-con {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url(https://media0.giphy.com/media/3oEjI6SIIHBdRxXI40/200_s.gif) center no-repeat #FFFFFF;
}
.se-pre-con p {
  width: 160px;
  height: 15px;
  position: absolute;
  top: 70%;
  left: 48%;
  margin-top: -70px;
  margin-left: -48px;
}

.hide {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


<!-- Loading -->
<div class="se-pre-con hide"><p>PROCESSANDO DADOS</p></div>



blablablablablalba<br>blablablablablalba<br>blablablablablalba<br>blablablablablalba<br>blablablablablalba<br>blablablablablalba<br>blablablablablalba<br>blablablablablalba<br>