In every application we use ajax to process request. While processing request via ajax if we don’t have any loading screen or say a progress bar on body then user will be confused what’s going on. Sometimes users think that the application has been crashed or hang when processing request takes time.
Inside this article we will cover i.e Add Loading Icon on Processing Ajax Request. For this we need few HTML code, CSS code and bit jquery code.
Let’s get started.
Download Loader/Processing Icon and Store
To display a loading icon we are going to download a gif image. We are downloading a google image.
After downloading this image place it where you will keep CSS code. If css will be placed at CSS folder then image should be there. If css code is at root, then image should be at root.
Also we can put into a different folder of images but we need to pass the image file path into css then.
We will create files in such a way –
- HTML code + CSS (Embedded) + Ajax Code added – program.html
- Loading icon at root of this project
Setup HTML Code + Ajax + CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Add Loading Icon on Processing Ajax Request</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;
}
body{
text-align: center;
}
/* 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>
</head>
<body>
<button type="button">Process Ajax</button>
<h3>Add Loading Icon on Processing Ajax Request.</h3>
<div class="overlay"></div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(function(){
// Add remove loading class on body element depending on Ajax request status
// Loading icon automatically display on overlay whenever ajax request starts.
$(document).on({
ajaxStart: function(){
$("body").addClass("loading");
},
ajaxStop: function(){
$("body").removeClass("loading");
}
});
// Initiate an Ajax request on button click
$(document).on("click", "button", function(){
var postdata = "name=Sanjay&email=sanjay@gmail.com";
$.post("<AJAX URL>", postdata , function(data){
// operation with data
});
$.get("<AJAX URL>", function(data){
// operation with data
});
$.ajax({
url: "<AJAX URL>",
data:{
},
dataType: "json",
method: "GET|POST",
success: function(){
}
});
});
});
</script>
</body>
</html> Stylesheet
.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;
}
body{
text-align: center;
}
/* 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;
}- If we wish to put into a different file, then we need to cut this code from here and paste into .css file. And create a link of this file via link tag of css into program.html file.
- We are using loader.gif file to show loading icon. Keep in mind image should be placed there where we have kept the css code. Currently image is reading from that path. In case if want to change also we can do that.
Ajax Setup of Showing Icon
$(document).on({
ajaxStart: function(){
$("body").addClass("loading");
},
ajaxStop: function(){
$("body").removeClass("loading");
}
});
loading class contains the css code to create a overlay screen.
We hope this article helped you to learn about Add Loading Icon on Processing Ajax Request in a very detailed way.
Online Web Tutor invites you to try Skillshike! Learn CakePHP, Laravel, CodeIgniter, Node Js, MySQL, Authentication, RESTful Web Services, etc into a depth level. Master the Coding Skills to Become an Expert in PHP Web Development. So, Search your favourite course and enroll now.
If you liked this article, then please subscribe to our YouTube Channel for PHP & it’s framework, WordPress, Node Js video tutorials. You can also find us on Twitter and Facebook.