How to display busy indicator using jQuery?

Question

How do I display a busy busy indicator at a specific point on a web page?

I want to start / stop the indicator when the Ajax request starts / ends.

Is it just a matter of showing / hiding an animated gif, or is there a more elegant solution?

Answer 1

You can just show / hide the gif, but you can also insert this in ajaxSetup, so it called every ajax request.

$.ajaxSetup({ beforeSend:function(){ // show gif here, eg: $("#loading").show(); }, complete:function(){ // hide gif here, eg: $("#loading").hide(); } }); 

It should be noted that if you want to execute a specific ajax request without a loader, you can do it like this:

 $.ajax({ global: false, // stuff }); 

Thus, the previous $ .ajaxSetup we did will not affect the request using global: false .

More information is available at: http://api.jquery.com/jQuery.ajaxSetup

Answer 2

The jQuery documentation recommends doing something like the following:

 $( document ).ajaxStart(function() { $( "#loading" ).show(); }).ajaxStop(function() { $( "#loading" ).hide(); }); 

Where #loading is an element with an employment indicator in it.

Literature:

• http://api.jquery.com/ajaxStart/

• http://api.jquery.com/ajaxStop/

• In addition, the jQuery.ajaxSetup API explicitly recommends avoiding jQuery.ajaxSetup for them:

  Note. The global callback functions must be installed with their respective global Ajax event handler methods: .ajaxStart() , .ajaxStop() , .ajaxComplete() , .ajaxError() , .ajaxSuccess() , .ajaxSend() -rather than in within the options object for $.ajaxSetup() .

Answer 3

I usually show / hide IMG as others have stated. I found a nice website that generates "upload gifs"

Link I just put it in a div and hide the default display: none; (css), and then when you call the function, show the image as soon as it completely hides it.

Answer 4

yes, it's really just a matter of showing / hiding the animated gif.

Answer 5

I did it in my project,

make a div with the rear earth url as a gif, which is nothing more than a gif animation

 <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.

he will perform thatsit trick.

let me know if you need antthing else, I can give you more details

in ajax success remove class

 success: function(data) { remove class using jquery } 

Answer 6

I did this in my project:

Global events in application.js:

 $(document).bind("ajaxSend", function(){ $("#loading").show(); }).bind("ajaxComplete", function(){ $("#loading").hide(); }); 

"Download" is an element that needs to be shown and hidden!

References: http://api.jquery.com/Ajax_Events/

Answer 7

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(); }); 

Answer 8

To slightly expand the solution for Rodrigo - for queries that are executed frequently, you can only display a downloadable image if the request takes longer than the minimum time interval, otherwise the image will constantly appear and disappear quickly

 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 } }); 

Answer 9

The old thread, but I wanted to update, since today I was working on this problem, I did not have jquery in my project, so I made it a simple old javascript way, I also needed to block the content on the screen so that 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";