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

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

Answer 2

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

Answer 3

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

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

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