Dim the page and show a loading indicator

Question

I would like to dim the page and show a loading indicator. I got the jQuery set. It's the CSS that I can't get to work. It's the diming the background that I can't do. Any ideas?

This is what I got (shows the indicator in the center of the page):

#Loading
{
    display: none;
    position: fixed;
    z-index: 1000;
    height: 31px;
    width: 60px;
    left: 50%;
    top: 35%;
    background-image: url('../Images/ajax-loader-bright.gif');
    background-repeat: no-repeat;
}

Answer 1

Since you've tagged your question as CSS 3:

background: rgba(0,0,0,.5) url('../Images/ajax-loader-bright.gif') no-repeat;
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:999;

You can adjust the dimming level by changing alpha (.5) in the line containing rgba.

Answer 2

to create dim page using jquery with/without image can also be done with this plugin http://jquery.malsup.com/block/#demos

to generate ajax loading page there is http://www.ajaxload.info/ which is awesome.