Show a busy indicator in a DIV with JQuery

Question

I have an animated .gif that I want to use as a busy indicator. This busy indicator will be used while some content is loading.

Once loaded, the content will appear within a div. While the content is loading, I want to basically have a semi-transparent layer over the existing content that also shows my animated .GIF. Currently, I have the following:

<div id="main">
  <div id="contentArea">
    Loaded content will go here
  </div>
  <input type="button" value="Load Latest Content" onclick="loadContent();" />
</div>

And the script is:

<script type="text/javascript">
  function loadContent() {
    // Show busy indicator on semi-transparent layer.
    pingWebService();
    return false;
  }
  function pingWebService() {
     $.ajax(...);
  }
  function pingWebServiceComplete() {
    // Hide busy indicator
  }
</script>

I have my .ajax call working just fine. I'm just not sure how to do the busy indicator part.

try block ui http://www.malsup.com/jquery/block/ – abhijit Oct 08 '12 at 15:05 — abhijit, Oct 08 '12 at 15:05

score 2 · Accepted Answer · answered Oct 08 '12 at 15:22

2

Simple enough, just like musefan said, just hide or show the div containing the image. Here's a contrived example.

answered Oct 08 '12 at 15:22

aziz punjani

25,586
9
47
56

score 0 · Answer 2 · answered Oct 08 '12 at 15:01

0

JQuery only needs to show/hide the indicator image which can be done something like:

$("#MyBusyElement").show();

and

$("#MyBusyElement").hide();

The rest is down to your html/css layout. You can use transparency in CSS but this will not be supported properly by older browsers so either have a "busy" gif that has a transparent background to cover the div, or settle for a fully opaque cover in older browser (I would just go for this. People with old browsers should suffer!)

answered Oct 08 '12 at 15:01

musefan

47,875
21
135
185

1

Careful. If you hide the animated gif, IE8 (dunno if IE9 as well) is not capable of showing the animation on a hidden-now-visible div. The image will stand still. – Alfabravo Oct 08 '12 at 15:03
@Alfabravo: You mean I have to support IE too?!?! ...just kidding, I have never seen this though. Can you produce a JSFiddle (or other source) to illustrate? – musefan Oct 08 '12 at 15:05
My 0.02: I had a webapp where I used a "loading" animated gif. It was in a hidden div which I kept hid of visible depending on the needs. It worked fine but IE (I can't recall clearly if it was 7 or 8) showed the gif still and the client complained because it seemed like "the site had stopped working". Let me try build a jsfiddle... – Alfabravo Oct 08 '12 at 15:10
Alfabravo, it seems to work for me in ie8 http://jsfiddle.net/4AQx6/2/ Maybe you're talking about ie7 ? – aziz punjani Oct 08 '12 at 15:24
I got a chance to test it in ie6 and ie7, it works in both O_o. Maybe your example was an isolated incident ? – aziz punjani Oct 08 '12 at 15:26
Nope, not isolated. http://stackoverflow.com/questions/780560/animated-gif-in-ie-stopping, http://stackoverflow.com/questions/7204378/animated-gif-freezes-in-updateprogress-in-ie8 – Alfabravo Oct 08 '12 at 15:32
@Alfabravo: Ah, I think this is different. I too have seen an issue that freezes gifs "shown" prior to a page load/refresh. But with this AJAX approach I think this should be fine – musefan Oct 08 '12 at 15:36

Show a busy indicator in a DIV with JQuery

2 Answers2