jquery overlay loading bar div

Question

So I have a table of data, and I'm getting data back using ajax. When data is being retrieved, the data from the table disappears and a small little loading circle appears. I'd prefer for the data to stay (I know how to do that) and for the loading circle to appear over the table in the center of it (not necessarily vertically, just at least horizontally), along with a slightly transparent background blocking out the view of the table a little (not the rest of the webpage). How can I make a div appear over the table and do that?

Answer 1

[See it in action]

HTML

<div id="overlay">
  <img src="http://www.sanbaldo.com/wordpress/wp-content/bigrotation2.gif" 
    id="img-load" />
</div>

CSS

#overlay { 
  display:none; 
  position:absolute; 
  background:#fff; 
}
#img-load { 
  position:absolute; 
}

Javascript

$t = $("#table"); // CHANGE it to the table's id you have

$("#overlay").css({
  opacity : 0.5,
  top     : $t.offset().top,
  width   : $t.outerWidth(),
  height  : $t.outerHeight()
});

$("#img-load").css({
  top  : ($t.height() / 2),
  left : ($t.width() / 2)
});

Then when you're loading things you just say:

$("#overlay").fadeIn();

And when you're finished:

$("#overlay").fadeOut();

Note: the loading image appears centered both vertically and horizontally as requested. Also, only the table will have the overlay not the whole page as requested.