Затемните страницу и покажите индикатор загрузки

Question

Я бы хотел затемнить страницу и показать индикатор загрузки. Я получил набор JQuery. Это CSS, который я не могу заставить работать. Это затемнение фона, которое я не могу сделать. Есть идеи?

Это то, что я получил (показывает индикатор в центре страницы):

#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

Поскольку вы отметили свой вопрос как 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;

Вы можете настроить уровень затемнения, изменив альфа (.5) в строке, содержащей rgba.

Answer 2

для создания тусклой страницы с использованием jquery с / без изображения также можно сделать с помощью этого плагина http://jquery.malsup.com/block/#demos

для генерации страницы загрузки ajax есть http://www.ajaxload.info/, что потрясающе.

Answer 3

Вы можете использовать отдельный div, расположенный абсолютно с шириной и высотой, установленными на 100%. Затем установите фон этого div на # 000 (черный) и его непрозрачность на 50% (или любой другой уровень затемнения).

<div id='dim_wrapper' style='width:100%; height:100%; background:#000; z-index:10'>&nbsp;</div>
<script>
$("#dim_wrapper").animate({
    'opacity':0.5
});
</script>