How to display a busy indicator with jQuery

Question

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

User · Answer

I had to use  HTML      lt img id  loading  src    Images spinner gif  alt  Updating      style  display  none     gt   In script file       invoked when sending ajax request     document  ajaxSend function                loading   show                invoked when sending ajax completed     document  ajaxComplete function                loading   hide

User · Answer

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

User · Answer

I did it in my project    make a div with back ground url as gif   which is nothing but animation gif   lt div class  busyindicatorClass  gt   lt  div gt    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

User · Answer

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       lt img id  loading  src    request contextPath  images spinner gif  style  display  none    gt    in my javascript      document getElementsByClassName  myclass   style opacity    0 7      document getElementById  loading   style display    block

User · Answer

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  gt 1 second         loading   true          setTimeout function                  if  loading                       show loading image                          1000                          complete  function              loading   false             hide loading image

User · Answer

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

User · Answer

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    http   api jquery com ajaxStart  http   api jquery com ajaxStop  In addition  jQuery ajaxSetup API explicitly recommends avoiding jQuery 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 the options object for   ajaxSetup

User · Answer

I tend to just show hide a IMG as other have stated  I found a good website which generates  loading gifs   Link 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

User · Answer

yes  it s really just a matter of showing hiding an animated gif

[javascript] How to display a "busy" indicator with jQuery?

Examples related to javascript

Examples related to jquery