Show a busy indicator in a DIV with JQuery

jquery css busyindicator
user70192 picture user70192 · Oct 8, 2012 · Viewed 8k times · Source

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

aziz punjani picture aziz punjani · Oct 8, 2012

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

Related questions

How do I add a class to a given element?

I have an element that already has a class: <div class="someclass"> <img ... id="image1" name="image1" /> </div> Now I want to create a JavaScript function that will add a class to the div (…

Read More
How can I remove a style added with .css() function?

I'm changing CSS with jQuery and I wish to remove the styling I'm adding based on the input value: if(color != '000000') $("body").css("background-color", color); else // remove style ? How can I do this? Note that the line above …

Read More
Slide right to left?

How can I have a div go from collapsed to expanded (and vice versa), but do so from right to left? Most everything I see out there is always left to right.

Read More