How To Show Loading Spinner In Ajax jQuery

Websolutionstuff | Jul-06-2022 | Categories : jQuery

In this article, we will see how to show loading spinner in ajax jquery. Using ajaxStart() and ajaxStop() method we can show loader on ajax call. When working with Ajax, showing a loading spinner or displaying a message with some animation like "Loading... Please Wait" is a popular way to indicate to the user that Ajax request is in progress. You can create a preloader using the jQuery ajaxStart() and ajaxStop() method.

So, let's see add loader in ajax call jquery, how to show loading in jquery, jquery loading spinner on ajax, show loader on ajax call jquery, ajax show loading, how to start/stop loader on every ajax call, jquery loading spinner on button click.

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="utf-8">
    <title>How To Show Loading Spinner In Ajax jQuery - Websolutionstuff</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;
        }
        body.loading{
            overflow: hidden;   
        }
        body.loading .overlay{
            display: block;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script>
        $(document).on("click", "button", function(){
            $.get("customers.php", function(data){
                $("body").html(data);
            });       
        });

        $(document).on({
            ajaxStart: function(){
                $("body").addClass("loading"); 
            },
            ajaxStop: function(){ 
                $("body").removeClass("loading"); 
            }    
        });
    </script>
    </head>
    <body style="text-align: center;">
        <button type="button">Click Here...</button>
        <p>Click the above button to get the customers details from the web server via Ajax.</p>
        <div class="overlay"></div>
    </body>
</html>

 


You might also like:

Recommended Post
Featured Post
How To Change Month Name In jQuery Datepicker
How To Change Month Name In jQ...

In this article, we will see how to change the month name in jquery datepicker. In the date picker, we can change t...

Read More

Jul-01-2022

How To Generate Barcode In Laravel
How To Generate Barcode In Lar...

In this tutorial, I will show you how to generate barcodes using the milon/barcode package. In this example, we wil...

Read More

Jun-06-2020

How To Encrypt And Decrypt String In Laravel 8
How To Encrypt And Decrypt Str...

In this example we will see how to encrypt and decrypt string in laravel 8 using crypt helper, As we all know laravel fr...

Read More

May-07-2021

How To Add Index In Laravel 10 Migration
How To Add Index In Laravel 10...

In this article, we will see how to add an index in laravel 10 migration. Here, we will learn about the laravel 10...

Read More

May-03-2023