How to display a "busy" indicator with jQuery?
JavascriptJqueryJavascript Problem Overview
How do I display a spinning "busy" indicator at a specific point in a web page?
I want to start/stop the indicator when an Ajax request commences/completes.
Is it really just a matter of showing/hiding an animated gif, or is there a more elegant solution?
Javascript Solutions
Solution 1 - Javascript
You can just show / hide a gif, but you can also embed that to ajaxSetup, so it's called on every ajax request.
$.ajaxSetup({
beforeSend:function(){
// show gif here, eg:
$("#loading").show();
},
complete:function(){
// hide gif here, eg:
$("#loading").hide();
}
});
One note is that if you want to do an specific ajax request without having the loading spinner, you can do it like this:
$.ajax({
global: false,
// stuff
});
That way the previous $.ajaxSetup we did will not affect the request with global: false
.
More details available at: http://api.jquery.com/jQuery.ajaxSetup
Solution 2 - Javascript
The jQuery documentation recommends doing something like the following:
$( document ).ajaxStart(function() {
$( "#loading" ).show();
}).ajaxStop(function() {
$( "#loading" ).hide();
});
Where #loading
is the element with your busy indicator in it.
References:
-
In addition,
jQuery.ajaxSetup
API explicitly recommends avoidingjQuery.ajaxSetup
for these: > Note: Global callback functions should be set with their respective global Ajax event handler methods—.ajaxStart()
,.ajaxStop()
,.ajaxComplete()
,.ajaxError()
,.ajaxSuccess()
,.ajaxSend()
—rather than within theoptions
object for$.ajaxSetup()
.
Solution 3 - Javascript
I tend to just show/hide a IMG as other have stated. I found a good website which generates "loading gifs"
[Link][1] [1]: http://www.ajaxload.info/
I just put it inside a div
and hide by default display: none;
(css) then when you call the function show the image, once its complete hide it again.
Solution 4 - Javascript
yes, it's really just a matter of showing/hiding an animated gif.
Solution 5 - Javascript
I did it in my project ,
make a div with back ground url as gif , which is nothing but animation gif
<div class="busyindicatorClass"> </div>
.busyindicatorClass
{
background-url///give animation here
}
in your ajax call , add this class to the div and in ajax success remove the class.
it will do the trick thatsit.
let me know if you need antthing else , i can give you more details
in the ajax success remove the class
success: function(data) {
remove class using jquery
}
Solution 6 - Javascript
To extend Rodrigo's solution a little - for requests that are executed frequently, you may only want to display the loading image if the request takes more than a minimum time interval, otherwise the image will be continually popping up and quickly disappearing
var loading = false;
$.ajaxSetup({
beforeSend: function () {
// Display loading icon if AJAX call takes >1 second
loading = true;
setTimeout(function () {
if (loading) {
// show loading image
}
}, 1000);
},
complete: function () {
loading = false;
// hide loading image
}
});
Solution 7 - Javascript
I did it in my project:
Global Events in application.js:
$(document).bind("ajaxSend", function(){
$("#loading").show();
}).bind("ajaxComplete", function(){
$("#loading").hide();
});
"loading" is the element to show and hide!
References: http://api.jquery.com/Ajax_Events/
Solution 8 - Javascript
I had to use
HTML:
<img id="loading" src="~/Images/spinner.gif" alt="Updating ..." style="display: none;" />
In script file:
// invoked when sending ajax request
$(document).ajaxSend(function () {
$("#loading").show();
});
// invoked when sending ajax completed
$(document).ajaxComplete(function () {
$("#loading").hide();
});
Solution 9 - Javascript
Old thread, but i wanted to update since i worked on this problem today, i didnt have jquery in my project so i did it the plain old javascript way, i also needed to block the content on the screen so in my xhtml
<img id="loading" src="#{request.contextPath}/images/spinner.gif" style="display: none;"/>
in my javascript
document.getElementsByClassName('myclass').style.opacity = '0.7'
document.getElementById('loading').style.display = "block";