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.

Answer 1

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

Answer 2

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!)