WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES
Advertisements

How to Show Loading Spinner in jQuery

Topic: JavaScript / jQueryPrev|Next

Answer: Use the ajaxStart() and ajaxStop() Method

While working with Ajax, showing a loading spinner or displaying a message with some animation like "Loading... Please Wait" is popular way to indicate the user that Ajax request is in progress.

You can create a preloader using the jQuery ajaxStart() and ajaxStop() method.

Let's try out the following example to understand how it basically works:

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>jQuery Create a "Please Wait, Loading..." Animation</title>
  • <style>
  • .overlay{
  •     display: none;
  •     position: fixed;
  •     width: 100%;
  •     height: 100%;
  •     top: 0;
  •     left: 0;
  •     z-index: 999;
  •     background: rgba(255,255,255,0.8) url("loader.gif") center no-repeat;
  • }
  • /* Turn off scrollbar when body element has the loading class */
  • body.loading{
  •     overflow: hidden;   
  • }
  • /* Make spinner image visible when body element has the loading class */
  • body.loading .overlay{
  •     display: block;
  • }
  • </style>
  • <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  • <script>
  • // Initiate an Ajax request on button click
  • $(document).on("click", "button", function(){
  •     $.get("customers.php", function(data){
  •         $("body").html(data);
  •     });       
  • });
  •  
  • // Add remove loading class on body element based on Ajax request status
  • $(document).on({
  •     ajaxStart: function(){
  •         $("body").addClass("loading"); 
  •     },
  •     ajaxStop: function(){ 
  •         $("body").removeClass("loading"); 
  •     }    
  • });
  • </script>
  • </head>
  • <body style="text-align: center;">
  •     <button type="button">Get Customers Details</button>
  •     <p>Click the above button to get the customers details from the web server via Ajax.</p>
  •     <div class="overlay"></div>
  • </body>
  • </html> 

The "customers.php" file in the above example simply returns dummy customers details like name, address, country, and so on from the database in a tabular format.


Related FAQ

Here are some more FAQ related to this topic:

Advertisements
Bootstrap UI Design Templates

Your Feedback:

We would love to hear from you, please drop us a line.