ajaxStart()
and ajaxStop()
MethodWhile working with Ajax, showing a loading spinner or displaying a message with some animation like "Loading... Please Wait" is popular way to indicate the user that Ajax request is in progress.
You can create a preloader using the jQuery ajaxStart()
and ajaxStop()
method.
Let's try out the following example to understand how it basically works:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Create a "Please Wait, Loading..." Animation</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;
}
/* 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-1.12.4.min.js"></script>
<script>
// Initiate an Ajax request on button click
$(document).on("click", "button", function(){
$.get("customers.php", function(data){
$("body").html(data);
});
});
// Add remove loading class on body element based on Ajax request status
$(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>
Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]
Laravel 8 Generate Dummy Data Using Factory Tutorial
It is important to test application with...Python String Title method
Python String title() is an inbuilt stri...How to move an element to left, right, up and down using arrow keys in jQuery
Use the jQuery keydown() method You c...How to populate dropdown list with array values in PHP
Use the PHP foreach loop Yo...Laravel 8 Google Recaptcha Tutorial Example
Google Recaptcha is Captcha service by G...