jQuery – Display a loading icon until the page loads completely

Updated on September 22, 2015 Kisan Patel

This tutorial will explain you how to display loading or processing gif image until the web page loads completely using jQuery?

So, first you need to add the below div element just after the body tag like this:

<body>
   <div id="loading">
        <img src="~/Content/Design/images/loader.gif" alt="Loading..." />
   </div>

Here, I have used below css to align loader.gif image to center of the web page.

#loading {
   background-color: #fff;
   width: 100%;
   height: 100%;
   position: fixed;
   z-index: 999;
   text-align:center;
}

Now, use below jquery code to hide above div element after the page completely loaded.

<script type="text/javascript">
    jQuery(window).load(function () {
        jQuery('#loading').hide();
    });
</script>

jQuery

« Previous