November 5, 2015

Add loading image during page load/before page is fully loaded

Learn How to Add loading image during page load/before page is fully loaded. Here is a fiddle for live demo

 

http://jsfiddle.net/shakalya/hckLnbL6/

There are very few codes needed to make this happen. We are putting a default wrapper(overlay) which can be transparent and inside a loading image in the center. Center image should be .gif extension with animation effects. A lot of GIF loading animation you can freely found on google by selecting type to ‘animation’. Or you can create your own animation in Photoshop.

<div id=”overlay”>
<img src=”https://d13yacurqjgara.cloudfront.net/users/155943/screenshots/1490736/loading.gif” alt=”Loading” />
</div>

Some styling you will be need to cover the whole page as overlay.

#overlay{
position:fixed;
z-index:99999;
top:0;
left:0;
bottom:0;
right:0;
background:rgba(32,32,32,1);
transition: 1s 0.4s;
text-align:center;
padding-top:100px
}

 

Now main part is to hide the overlay after page load. That we do with jQuery load event. On page load we are fading the overlay. That’s it.

jQuery(window).load(function(){
jQuery(‘#overlay’).fadeOut();
});

Make sure you are using a jQuery library.

You may also like...

Leave a Reply