Add a preloader in your website

*************************** Add a preloader in your website ********************************

Add this html markup under the <body> start tag....
======================================================
<div id="preloader">
    <div id="status"></div>
</div>


Add this CSS style in your style.css file
================================================

#preloader{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:100%;
    z-index:9999;
    background-color:#fff;
    opacity:1;
}

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


Add this js code in your main.js file
============================================

//preloader
jQuery(window).load(function(){
    jQuery("#status").fadeOut();
    jQuery("#preloader").delay(500).fadeOut("slow");
});


You can also add a preloader with jquery plugin.There have some preloader plugin name and link
====================================================================================================

fakeLoader.js       >>>>>>  https://github.com/joaopereirawd/fakeLoader.js
queryloader2        >>>>>>  https://github.com/Gaya/queryloader2