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

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 2

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

Answer 3

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

Answer 4

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