Question

I want to show a loading image after page submit. I want it to be like , loading image show in the middle of the page and it should have a transparent background to show the page content. I have used following

    #loading {
    position:fixed;
    top:50%;
    left:50%;
    z-index:1104;
    background-color:#999999;
    width:100%;
    height:100%;

    }

Please dont include the javascript part in the answer, I only want to know about styling.

This is not giving background color to the whole page. Please help how can I show a loading image at center of the page and the page content should slightly show.

THanks

Answer 1

Assuming that you want to disable all interactions with content being loaded, you could simply overlay the element and center its background:

#overlay { 
    /*Cover the entire screen regardless of scrolling*/ 
    position:fixed;top:0;right:0;bottom:0;left:0; 
    background: #ff0000 url(...) no-repeat 50% 50%; 
}

Fiddled with a semitransparent bgcolor for demo purposes.

Edit: actually centering an element both vertically and horizontally is hard.