Learn free online HTML5, javascript, and jquery Tutorials by Examples

Wednesday 10 December 2014

page loader in jquery

<script>
       jQuery(window).load(function() { // makes sure the whole site is loaded
      jQuery("#status").fadeOut(); // will first fade out the loading animation
      jQuery("#preloader").delay(1000).fadeOut("slow"); // will fade out the white DIV that covers the   website.
})
</script>

<div id="preloader">
    <div id="status">&nbsp;</div>
</div>

<style>
#preloader  { position: absolute; top: 0; left: 0; right: 0; bottom: 0;
     background-color: #fefefe;  z-index: 99; height: 100%; }

#status  { width: 200px; height: 200px; position: absolute;  left: 50%;
     top: 50%; background-image: url(../images/ajax-loader.gif);  
  background-repeat: no-repeat;
     background-position: center;
     margin: -100px 0 0 -100px;
 }
</style>

No comments:

Post a Comment