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]
How to Protect Image from Public View in Laravel 8
If you are running a image website, wher...Django 3 Multiple File-Image Upload with Angular 9
In the precedent tutorial we have optica...Add Routing in Angular 10 App Tutorial
This is a step by step PHP 7 & MySQL...How to remove item from array by value
In your way to work in Javascript, you w...How to Access Localhost on Mobile Browsers
Many times you are working in your proje...