How to Create Please Wait Loading Animation in jQuery

Almost every website and application displays loading animation whenever there is some task processing in the background. In this article, we will learn how to create please wait loading animation in jQuery. It is useful to display these kind of animations to improve user experience of your website.

How to Create Please Wait Loading Animation in jQuery

First of all, we will create a div at the bottom of the page.

<div class="modal"><!-- Place at bottom of page --></div>

This div will be hidden by default. When user needs to view the loading animation, we will unhide this div and when the task is over, we will hide it again.

Next, we add CSS for the above div modal.

.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('http://i.stack.imgur.com/FhHRx.gif') 
                50% 50% 
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading .modal {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}

We have hidden the div with class=’modal’, set its position as relative along with its dimensions. We have also set background to 80% white with our animation centered. We have used a loading animation from online. You can change it as per your requirement. If you are loading the image from your website, change the path to a relative path instead of a URL as mentioned above.

We also turn the scrollbar off on body, when the loading animation is being displayed. Lastly, we also add the jQuery function as shown below.

$body = $("body");

$(document).on({
    ajaxStart: function() { $body.addClass("loading");    },
     ajaxStop: function() { $body.removeClass("loading"); }    
});

In the above code, we attach two functions to the document object (web page) – for ajaxStart and ajaxStop. The first function is called whenever an AJAX function is called on the page, and at that time, our function adds class ‘loading’ to the body DOM element. Accordingly, the CSS for div with class ‘modal’ is activated and it is displayed. When the AJAX function stops, ajaxStop function is called and it removes class ‘loading’ from body DOM element. At that time, the CSS for div with class=’modal’ is de-activated and the div is hidden.

In this article, we have learnt how to create please wait loading animation on web pages. You can customize it as per your requirement.

Also read:

How to Get Current URL with jQuery
How to Get Class List for DOM Element
How to Move Element to Another Element in jQuery
How to Automatically Scroll to Bottom of Page in JS
How to Change Image Source in jQuery