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 Add Bootstrap 5 Modal Popup In Laravel 9
How To Add Bootstrap 5 Modal P...

In this article, we will see how to add bootstrap 5 modal popup in laravel 9. We will learn how to use the bootstrap 5 m...

Read More

Nov-02-2022

7 Tips and Tricks for Laravel Migration
7 Tips and Tricks for Laravel...

As a developer who has been deeply immersed in the Laravel ecosystem, I've come to appreciate the power and flexibil...

Read More

Oct-30-2023

How to Create Payment Link in Stripe using API in Laravel 10
How to Create Payment Link in...

In today's digital age, the ability to facilitate online payments efficiently is crucial for businesses and develope...

Read More

Oct-09-2023

How To Create Candlestick Chart In Laravel 9 Using Highcharts
How To Create Candlestick Char...

In this article, we will see how to create a candlestick chart in laravel 9 using highcharts. A candlestick is a ty...

Read More

Oct-06-2022