Skip to main content
3 de 4
se añadieron 14 caracteres en el cuerpo
rnrneverdies
  • 16.8k
  • 4
  • 53
  • 81

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>
rnrneverdies
  • 16.8k
  • 4
  • 53
  • 81