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.

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...

Example Php JQuery

Robert look

Author, Web Developer (Front-end & Back-end)

My Name is Robert look from New york, America. I'm a Web Application Developer with 6 years of experience. Currently, I'm working on front-end & back-end web development using popular web technology Languages. That's why I love to share my coding knowledge in a smart way.