Preloader

// Preloader

// call this into your template
        <div id="preloader">
            <div id="status">&nbsp;</div>
        </div>

/*--------------------------------------------------------------------------------------------------*/
// call this css into your css

/* Preloader */

#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff; /* change if the mask should have another color then white */
    z-index:99; /* makes sure it stays on top */
}

#status {
    width:200px;
    height:200px;
    position:absolute;
    left:50%; /* centers the loading animation horizontally one the screen */
    top:50%; /* centers the loading animation vertically one the screen */
    background-image:url(images/preloader.gif); /* path to your loading animation this is animation gif */
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px; /* is width and height divided by two */
}


/*--------------------------------------------------------------------------------------------*/

// call this into your main.js

jQuery(document).ready(function() {
		jQuery(window).load(function() { // makes sure the whole site is loaded
      jQuery('#status').fadeOut(); // will first fade out the loading animation
      jQuery('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website.
      jQuery('body').delay(350).css({'overflow':'visible'});
    })

});

/*---------------------------------------------------------------------------------------------------------*/