Display Animation While Page Loading Using jQuery

This tutorial teaches us how to implement loading bars and images while the page is still loading using jQuery. In simple words, display animation while loading page using jQuery.jQuery-Page-Load-Animation

If your pages have too large data to display, it is common that the user gets frustrated during the page load. This is the time, you can think of something which can keep the users engaged. We will show you, how to integrate an ajax loading image using jQuery. We will try defining two ways to achieve this effect. You can find the two ways in the below demo.

DEMO | DOWNLOAD(Size 8.45 MB)

First method – Using Loading image in CSS and a HTML Div element with jQuery bind function

The below method uses a simple div element with an id, which get accessed by the jQuery code.

HTML Markup:

jQuery Code: 

You can download the latest jquery framework from jquery.com. In the above code, we use the bind function to access the id #loading to fadeout after the page has loaded.

CSS:

The above CSS connects to the animated gif to be shown on the center of the page.

Second Method – Using loading image inline in HTML with jQuery load function

This method uses an <img> tag directly for the loading gif animation, which get modified by the id #loader from the jQuery code. Also, we set the html tag to a class no-js which makes the loading animation appear only if the browser supports JavaScript.

HTML Markup:

jQuery Code:

The above code uses jQuery framework and modernizr plugin. The modernizr plugin is used to detect HTML5/CSS3 browser compatibility and also to write conditional JavaScript and CSS. You can learn more about modernizr from http://modernizr.com/

The above code uses a load function instead of a bind function and does the same thing as the first method by fading the loading image after the page gets loaded.

CSS:

The above CSS, here is to display the ajax like loading animation only if the browser supports, this is basically done using the modernizer plugin.

DEMO | DOWNLOAD(Size 8.45 MB)

You can find lots of free gif loading animation on the web. You can create one for yourself from http://www.ajaxload.info/

There are many such sites, where you can create and generate loading buttons.

Please share your experience of using a similar usability which has not been described in this page.

Vinod

Vinod Suthersan is a enthusiastic web designer still learning new things on web designing. He loves designing, hunting new designs, blogging, and crazy about Internet. Know more

You may also like...

5 Responses

  1. mike says:

    Wow, works like a charm! Thank you 🙂

  2. twilliams1 says:

    Interesting! Are there any benefits to using the second method over the first?

  3. Hi,
    The jQuery code below:
    $(window).load(function()

    helps the spinner to show up and stop