As I was working on my single-page app, I thought about adding a spinner and gray background to provide feedback to users while processes are loading. I discovered JQuery's AjaxStart() and AjaxStop() functions, which allow me to display the spinner during any Ajax calls in the app. Here is an example of how I implemented it.
<div class="overlay">
<div id="loading-img"></div>
</div>
Using JQuery:
$(document).ajaxStart(function () {
$('.overlay').delay(3500).show();
}).ajaxStop(function () {
$('.overlay').hide();
});
In terms of styling:
#loading-img {
background: url(http://preloaders.net/preloaders/360/Velocity.gif) center center no-repeat;
height: 100%;
z-index: 20;
}
.overlay {
background: #e9e9e9;
display: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.5;
}
Although the code works and the spinner shows with the gray background, there was a slight issue where the spinner would briefly appear for half a second before being delayed. I attempted to use the delay() method to hold off on displaying the spinner, but it didn't work as expected. I wanted the spinner to only appear after 3 seconds. I'm unsure if there is an error in my code or if there is a better method to implement the spinner and gray background. Any suggestions would be greatly appreciated.