In this article I will explain with an example, how to show Loading (Busy) Indicator (Spinner) with Overlay GIF image with jQuery AJAX calls.
Loading (Busy) Indicator (Spinner) with Overlay GIF Image is used to display the progress of the jQuery AJAX call and it will be shown to the user when the jQuery AJAX call is started and will hide once the jQuery AJAX call is completed.
HTML Markup
The following HTML Markup consists of an HTML Button, an HTML SPAN and a hidden HTML DIV which will be used to display the Loading (Busy) Indicator (Spinner) with Overlay GIF Image during the jQuery AJAX calls.
<input type="button" id="btnGet" value="Get IP Address" />
<br />
<br />
<span id="lblIPAddress"></span>
<div class="modal" style="display: none">
<div class="center">
<img alt="" src="loader.gif" />
</div>
</div>
Displaying Loading (Busy) Indicator (Spinner) with Overlay GIF Image during jQuery AJAX calls
The HTML Button has been assigned a jQuery click event handler. When the Button is clicked, a jQuery AJAX call is made to the IP Web Service, which returns the IP Address of machine.
A jQuery AJAX Setup function is used to display the Loading (Busy) Indicator (Spinner) with Overlay GIF Image during the jQuery AJAX call. The hidden HTML DIV is shown inside the beforeSend event handler and it is hidden inside the complete event handler.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnGet").click(function () {
$.ajaxSetup({
global: false,
type: "GET",
url: "https://api.ipify.org/?format=json",
beforeSend: function () {
$(".modal").show();
},
complete: function () {
$(".modal").hide();
}
});
$.ajax({
data: "{}",
success: function (r) {
$("#lblIPAddress").html("IP Address: " + r.ip);
}
});
});
});
</script>
Loading (Busy) Indicator (Spinner) with Overlay CSS
Following CSS is used for displaying the Loading (Busy) Indicator (Spinner) with Overlay GIF Image during jQuery AJAX calls.
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
.modal
{
position: fixed;
z-index: 999;
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: Black;
filter: alpha(opacity=60);
opacity: 0.6;
-moz-opacity: 0.8;
}
.center
{
z-index: 1000;
margin: 300px auto;
padding: 10px;
width: 130px;
background-color: White;
border-radius: 10px;
filter: alpha(opacity=100);
opacity: 1;
-moz-opacity: 1;
}
.center img
{
height: 128px;
width: 128px;
}
</style>
Screenshot
![Show Loading (Busy) Indicator (Spinner) with Overlay with jQuery AJAX example]()
Demo
Downloads
