Display a loading icon until the page loads completely

Isn’t it a great idea to show a cool animated image until your website is loading? Of Course, it will improve your site’s user experience.

Let’s learn how to use jQuery and CSS to show loading image while page loading. Free download loading gif images and use these 7 + 10 cool pre-loading icons.

preloader_1                   preloader_2                 preloader_3

How to show a Responsive loading icon or image while page loads.

  1. Add a div just after <body> tag.

  1. Add some CSS to show the icon and bring it in the middle of the page.


3. Now add some jQuery to show the pre-loading icon when the page is loading and hide when it has finished loading.


All done, now reload your page and it will show a loading icon.