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
Laravel 8 Create Custom Helper Function Example
Laravel 8 Create Custom Helper...

In this article, we will see laravel 8 create a custom helper function example. As we all know laravel provides man...

Read More

Oct-12-2020

Laravel 8 Multiple Database Connections
Laravel 8 Multiple Database Co...

Hello Freinds, In this tutorial we will see laravel 8 multiple database connections. Today I will give you step by st...

Read More

Apr-19-2021

How To Upload Multiple Image In Laravel 9
How To Upload Multiple Image I...

 In this article, we will see how to upload multiple images in laravel 9. here, we will see the tutorial of multipl...

Read More

Mar-18-2022

Laravel 9 One To Many Relationship Example
Laravel 9 One To Many Relation...

In this article, we will see laravel 9 one to many relationship example. Also, you can use one to many relationships in...

Read More

Apr-02-2022