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



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.

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


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.

Make sure you are using a jQuery library.

Leave a Reply