CODEWITHSUNDEEP
htmlcssajax
Lock
Lock

Reputation: 5522

How do I grey out and show a loading GIF in the centre of a table

How do I make a whole <table> have a transparent grey effect whilst a loading image shows in the middle?

I want to run some AJAX calls and have the table inaccessible and overlayed with a grey background with a loading GIF in the centre whilst the ajax context is being loaded.

Upvotes: 2

Views: 1416

Answers (1)

Callum Linington
Callum Linington

Reputation: 14417

This should work! Here is the fiddle, I cheated with the ajax, its not that hard. I simulated an ajax call with my Timeout function.

Other things to note, you don't give that parent div a height or width, because my table is tiny it looks crap with out it. It does need that position:relative because that allows the .page-loader guy to fill that space only.

You can obviously play around with it.

HTML:

<div style="position: relative">
    <div class="page-loader">

        <img src="/Content/loader.gif" style="position:absolute; margin:auto; top:0; left:0; right:0; bottom:0;" width="100" alt="Loading">

    </div>

    <table>

    </table>

</div>

CSS:

.page-loader {
    position:absolute; 
    height:100%; 
    width:100%; 
    background:gray;
    -ms-opacity:0.5;
    opacity:0.5; 
    z-index:1000000;
    display: none;
    margin-left: -40px;
    margin-top: -19px;
}

Upvotes: 1

Related Questions