Create a preloader for your webpage

The idea behind creating a preloader for a webpage is to display a div block that covers the whole screen above all your web content and hide it once all the contents have been loaded.

So lets get started.

First you need to create the preloader content. For the tutorial purpose we will create a simple one that has a loader message and a loader gif image.

<div id="preloader">
    <div id="preloaderdiv">
        LOADING
        <br /><br />
        <img src="images/loading.gif">
    </div>
</div>

And the CSS for our preloader div

#preloader {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99999;
    width: 100%;
    height: 100%;
    overflow: visible;
    background: #fff;
}

#preloaderdiv {
    color:rgb(204,102,0);
    text-align:center;
    vertical-align:central;
    margin-top:200px;
    letter-spacing:15px;
}

and make sure you assign the highest z-index value so that the div is placed above all the content.

Now include the jQuery file in the head section

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>

And finally we need to write the code to hide it once the whole webpage is loaded. We will use the window load function of jQuery for this.

$(window).load(function () {
  setTimeout(function(){
    $('#preloader').fadeOut('slow', function () {
    });
  },0); // set the time here
});