Te recomiendo que te muevas a Ajax y utilizes los eventos ajaxStart
y ajaxComplete
. Es la forma natural que viene con jQuery para hacer lo que estas intentando. Si usas formularios tipo submit, no podrás mostrar nada pues la pagina se recarga y se pierde la pagina del formulario.
Estos eventos son invocados por jQuery automáticamente al iniciarse , lo cual simplifica todo el código y queda mucho mas limpio.
$(document).ajaxStart(function() {
$('#reloj').show();
}).ajaxComplete(function() {
$('#reloj').hide();
});
De acuerdo al ejemplo deberías tener un <div>
inicialmente oculto, donde insertar la animación, que se mostrara cuando hagas cualquier pedido al servidor y se ocultara automáticamente cuando termine la consulta (sea exitosa o no).
Este es CSS, cámbialo por la animación que elijas (respetando el Id o cambiando el script arriba por la clase correspondiente). No olvides agregarle display: none;
para que esta oculto al iniciar.
#reloj {
display: none;
position: fixed;
background: yellow;
}
Agregar esto en el html
<div id="reloj">Cargando...</div>