How To Show Loading Spinner In JQuery?


In this tutorial, we learn how to create jQuery Loading Spinner in Html If you are searching like jquery ajax loading spinner,  jquery ajax loading gif, jquery loading spinner, display loading image using ajax call is in progress. So this tutorial is very helpful for you.

In this jQuery Ajax Loading Spinner, loader in jquery, we would love to share with you how to create ajax Loading Spinner in Html with example.

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

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

How To Show Loading Spinner In JQuery | Use The AjaxStart()
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How To Show Loading Spinner In JQuery? - phpcodingstuff.com</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-img.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-3.5.1.min.js"></script>
<script>
// Initiate an Ajax request on button click
$(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">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>

I hope it can help you...

Leave a Reply

Your privacy will not be published. Required fields are marked *

We'll share your Website Only Trusted.!!