Dim the page and show a loading indicator
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开发者_StackOverflow中文版 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;
}
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
.
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.
You could use a separate div positioned absolutely with width and height set to 100%. Then set the background of this div to #000 (black) and its opacity to 50% (or whatever level of dimness you want).
<div id='dim_wrapper' style='width:100%; height:100%; background:#000; z-index:10'> </div>
<script>
$("#dim_wrapper").animate({
'opacity':0.5
});
</script>
精彩评论