Atenuar la página y mostrar un indicador de carga

Question

Me gustaría atenuar la página y mostrar un indicador de carga. Tengo el conjunto jQuery. Es el CSS que no puedo ponerme a trabajar. Es el fondo oscuro que no puedo hacer. ¿Algunas ideas?

Esto es lo que tengo (muestra el indicador en el centro de la página):

#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

Ya que lo ha insertado en cuestión 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; 

Se puede ajustar el nivel de atenuación cambiando alfa (.5) en la línea que contiene rgba.

Answer 2

Se puede usar un div por separado posición absoluta con la anchura y la altura se ajusta al 100%. A continuación, establezca el fondo de este div en # 000 (negro) y su opacidad en 50% (o el nivel de oscuridad que desee).

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

Answer 3

para crear la página tenue usando jQuery con/sin imagen también se puede hacer con este plugin http://jquery.malsup.com/block/#demos

para generar carga de la página ajax hay http://www.ajaxload.info/ que es impresionante.