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

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

• javascript
• html
• css
• css-position

Share Improve this question Follow edited Aug 14, 2012 at 22:05 Oleg 25k88 gold badges6464 silver badges9494 bronze badges asked Jun 21, 2012 at 6:42 phpgeekphpgeek 4766 silver badges1313 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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.

Remove top:50% & left:50%;

http://jsfiddle/qqncv/1/