Este es el codigo HTML
Código:
<div class="fondoTransparente" id="fondo"></div>
<div id="load">
<div id="load_left"><img src="images/gray75_polling.gif"/></div>
<div id="load_right">
<h2>Cargando...</h2>
</div>
</div>
Este el CSS
Código:
.fondoTransparente
{
/*Div que ocupa toda la pantalla*/
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background-color:#ccc;
/*IE*/
filter: alpha(opacity=70);
/*FireFox Opera*/
opacity: .7;
display:none;
}
div#load
{
position: absolute;
/*nos posicionamos en el centro del navegador*/
top:50%;
left:50%;
/*determinamos una anchura*/
width:305px;
/*indicamos que el margen izquierdo, es la mitad de la anchura*/
margin-left:-152px;
/*determinamos una altura*/
height:95px;
/*indicamos que el margen superior, es la mitad de la altura*/
margin-top:-42px;
background-color:#fff;
display:none;
}
y este el JavaScript
Código:
function mostrar(){
var ante=document.getElementById('fondo');
var ante2=document.getElementById('load');
ante.style.display="block";
ante2.style.display="block";
}
function ocultar(){
var ante=document.getElementById('fondo');
var ante2=document.getElementById('load');
ante.style.display="none";
ante2.style.display="none";
}
El codigo JS lo pones dependiendo de tu situacion, por ejemplo si usas AJAX, lo pones antes de llamar a la funcion del servidor, si no usas AJAX y lo mandas a otra pagina, lo pondrias en el unload() del body y asi segun sea tu caso, espero que te sirva, bye