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">
    <meta charset="utf-8">
    <title>How To Show Loading Spinner In Ajax jQuery - Websolutionstuff</title>
            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;
            overflow: hidden;   
        body.loading .overlay{
            display: block;
    <script src=""></script>
        $(document).on("click", "button", function(){
            $.get("customers.php", function(data){

            ajaxStart: function(){
            ajaxStop: function(){ 
    <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>


You might also like:

Recommended Post
Featured Post
Bootstrap DateTimePicker Example
Bootstrap DateTimePicker Examp...

In this post i will show you how to implement bootstrap datetimepicker with example, bootstrap 4 datetimepicke...

Read More


How To Create Dynamic Pie Chart In Laravel
How To Create Dynamic Pie Char...

In this article, we will see how to create a dynamic pie chart in laravel. charts are used to represent data i...

Read More


Laravel 8 Group By Query Example
Laravel 8 Group By Query Examp...

In this example we will see laravel 8 group by query example. how to use group by in laravel 8. As you might expect...

Read More


Laravel 9 Generate PDF File Using DomPDF
Laravel 9 Generate PDF File Us...

In this tutorial, we will see laravel 9 generate pdf file using dompdf. For generating pdf files we will use the la...

Read More