jquery overlay loading bar div

So I have a table of data, and I'm getting data back using ajax. When data is being retrieved, the data from the tab开发者_Go百科le 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?

---

[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.

---

just use jQuery's .html() method to inject the new div with loading circle into the div holding the table. Then use css to style it. maybe give it a background image that is opaque. and relatively or absolutely position the loading circle.

say you have:

<div id="table_container>
    <table>
        <tr>
            <td>something</td>
            <td>something</td>
        </tr>
    </table>
</div>

when loading the new data use:

$('div#table_container').html('<div id="overlay"><img src="path/to/loading/img.png" class="loading_circle" alt="loading" /></div>');

and style it something like:

#overlay {
    width: 100%;
    background: url('path/to/opaque/img.png') repeat;
    position: relative;
}

#overlay img.loading_circle {
    position: absolute;
    top: 50%;  // edit these values to give you
    left: 50%; // the positioning you're looking for.
}

---

This worked for me, but only one thing with the overlay as it was shifted to the left.

I added one line to the javascript and it worked perfectly on Chrome, Firefox and Safari (on Windows).

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

---

well, you can try using css position:absolute for the loading circle