Lafa Lafa - 1 year ago 68
HTML Question

Create a preloader page

I'm trying to create a preloader page for my website but i don't know how to setup it in javascript, i've create all the css but i need help to create the transiction for switch from the loader to the page.



.caricamento {
margin: 0 auto;
vertical-align: middle;
text-align: center;
display: block;
float: center;
position: absolute;
top: 45%;
left: 48%;
}

#cerchiodentro,#loading #cherchiodentro
{
display:block;
position:absolute;
margin:20px 0 0 20px;

width:40px;
height:40px;
border-top:7px solid #f22121;
border-bottom:7px solid #f22121;
border-left:7px solid transparent;
border-right:7px solid transparent;

border-radius:40px;
-moz-border-radius:40px;
-webkit-border-radius:40px;
-ms-border-radius:40px;
-o-border-radius:40px;

box-shadow:0 0 20px #f22121;
-webkit-box-shadow:0 0 20px #f22121;
-moz-box-shadow:0 0 20px #f22121;
-ms-box-shadow:0 0 20px #f22121;
-o-box-shadow:0 0 20px #f22121;

-webkit-animation: ccwSpin .555s linear .2s infinite;
-moz-animation: ccwSpin .555s linear .2s infinite;
-o-animation: ccwSpin .555s linear .2s infinite;
-ms-animation: ccwSpin .555s linear .2s infinite;
animation: ccwSpin .555s linear .2s infinite;
}

#loading #cerchiofuori
{
display:block;
position:absolute;
margin:0 auto;

width:80px;
height:80px;
border-top:7px solid #f22121;
border-bottom:7px solid transparent;
border-left:7px solid transparent;
border-right:7px solid 06F;

border-radius:80px;
-moz-border-radius:80px;
-webkit-border-radius:80px;
-ms-border-radius:80px;
-o-border-radius:80px;

-webkit-animation: cwSpin 1s linear .2s infinite;
-moz-animation: cwSpin .666s linear .2s infinite;
-o-animation: cwSpin .666s linear .2s infinite;
-ms-animation: cwSpin .666s linear .2s infinite;
animation: cwSpin .666s linear .2s infinite;
}

#loading #cerchiodentro
{

border-top:7px solid transparent;
border-bottom:7px solid #f22121;
border-left:7px solid #f22121;
border-right:7px solid transparent;

box-shadow:none;
-moz-box-shadow:none;
-ms-box-shadow:none;
-o-box-shadow:none;
-webkit-box-shadow:none;
}

@-webkit-keyframes cwSpin
{
0%{-webkit-transform:rotate(0deg); }
100%{-webkit-transform:rotate(360deg); }
}
@-moz-keyframes cwSpin
{
0%{-moz-transform:rotate(0deg); }
100%{-moz-transform:rotate(360deg); }
}
@-ms-keyframes cwSpin
{
0%{-ms-transform:rotate(0deg); }
100%{-ms-transform:rotate(360deg); }
}
@-o-keyframes cwSpin
{
0%{-o-transform:rotate(0deg); }
100%{-o-transform:rotate(360deg); }
}
@keyframes cwSpin
{
0%{transform:rotate(0deg); }
100%{transform:rotate(360deg); }
}

@-webkit-keyframes ccwSpin
{
0%{-webkit-transform:rotate(0deg); }
100%{-webkit-transform:rotate(-360deg); }
}
@-moz-keyframes ccwSpin
{
0%{-moz-transform:rotate(0deg); }
100%{-moz-transform:rotate(-360deg); }
}
@-ms-keyframes ccwSpin
{
0%{-ms-transform:rotate(0deg); }
100%{-ms-transform:rotate(-360deg); }
}
@-o-keyframes ccwSpin
{
0%{-o-transform:rotate(0deg); }
100%{-o-transform:rotate(-360deg); }
}
@keyframes ccwSpin
{
0%{transform:rotate(0deg); }
100%{transform:rotate(-360deg); }
}

<div class="caricamento">
<span id="loading">
<span id="cerchiofuori"></span>
<span id="cerchiodentro"></span>
</span>
</div>





For the javascript i found this but i don't know how to adapt this to my page, some one can help me please?

$(document).ready(function() {

setTimeout(function(){
$('body').addClass('loaded');
$('h1').css('color','#222222');
}, 3000);

});


^^^ This code is wrong but this is what i found

Thanks for all the answer

Answer Source

You can use the document.onreadystatechange event. When it is triggered just check the status, when it is complete the page is loaded, follow the code:

document.onreadystatechange = function () {
   if (document.readyState == "loading") {    
      //action while loading
   }else if(document.readyState == "complete") {
      //action when page is loaded
      $('.caricamento').hide('slow');
   }
}

This is the best way to know if the page has been loaded, but can be used along with a delay so the animation has a minimum time on the screen!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download