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\'

Answer 1

[See it in action]

HTML

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.