0

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

Oleg
  • 22,838
  • 4
  • 55
  • 82
phpgeek
  • 47
  • 5
  • 13

2 Answers2

3

Remove top:50% & left:50%;

http://jsfiddle.net/qqncv/1/

SVS
  • 4,185
  • 1
  • 21
  • 28
  • I think after removing top and left the loading image will show on the top left of the page. It should show in the middle of the page , Middle from Horizontal and vertical. – phpgeek Jun 21 '12 at 06:48
  • Add background image to your loading div check the updated fiddle http://jsfiddle.net/qqncv/1/ – SVS Jun 21 '12 at 06:53
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.

Community
  • 1
  • 1
Oleg
  • 22,838
  • 4
  • 55
  • 82
  • Thanks O.V. Just wanted to know where you defined the transparency. is this rgba(0,0,0,0.5) ? – phpgeek Jun 21 '12 at 07:00
  • @vikassharma: yup, that's an alternative colour notation, effectively #000000 with 0.5 alpha – Oleg Jun 21 '12 at 07:07