Skip to main content
Mejorar el codigo
Origen Enlace
Montaycabe
  • 1k
  • 5
  • 11

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: 50%;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, 

No necesitas añadir mas divs al html, puedes hacerlo con uno solo y :before

$(function(){
setTimeout(function(){ 
$("#preload").addClass("out");
}, 5000);
});
#preload{
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background:#fff;
  transition:opacity linear 1s;
}
#preload:before{
  content:"";
  position: absolute;
  top: 50%;
  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, 

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, 

Origen Enlace
Montaycabe
  • 1k
  • 5
  • 11

No necesitas añadir mas divs al html, puedes hacerlo con uno solo y :before

$(function(){
setTimeout(function(){ 
$("#preload").addClass("out");
}, 5000);
});
#preload{
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background:#fff;
  transition:opacity linear 1s;
}
#preload:before{
  content:"";
  position: absolute;
  top: 50%;
  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,