Ajax loading css (indicadores de carga)

Indicadores de carga

Indicadores de carga

Si desarrollas aplicaciones web, seguramente te has topado con el comentario por parte de los usuarios de que dan click a un botón o enlace y dicen ellos que no pasa nada.. y claro, algunas veces el servidor responde muy lento debido a la carga de peticiones o la cantidad de datos que debe retornar.. entonces es ahí cuando se hace necesario mostrar de manera visual que deben esperar, que su petición esta siendo atendida y que pronto obtendrán una respuesta.

Este es uno de esos métodos siempre útiles para cuando trabajamos con ajax (postbacks o callbacks), mejor conocidos en inglés como loaders o loading spinners. Este post es una pequeña guía para mostrar como implementar un loader utilizando jQuery o Mootols y ajax.

Es necesario escribir un poco de CSS, por lo que el código que viene es la clave para que el cargador tenga sentido

div.loading, .loading {
   background-color: #FFFFFF;
   background-image: url('loading.gif');
   background-position: center center;
   background-repeat: no-repeat;
   z-index: 1400;
}
div.loading * {
   visibility: hidden;
}

Y ahora implementado utilizando jQuery

$.ajax({
  url: 'prueba.html',
  type: 'get',
  beforeSend: function() {
    $(".grid").addClass("loading");
  },
  success: function(respuesta) {
    $(".grid").empty().html(respuesta);
  },
  complete: function() {
    $(".grid").removeClass("loading");
  }
});

Y para quienes gustan de Mootools, se hace de esta forma

var req = new Request({
   method: 'get',
   url: 'prueba.html',
   onRequest: function() {
      $(".grid").addClass("loading");
   },
   onComplete: function(respuesta) {
      $(".grid").removeClass("loading");
      $(".grid").empty().setHTML(respuesta);
   }
}).send();

Para este ejemplo loading.gif es una imagen animada que puede conseguirse en cualquiera de los siguientes sitios:
http://www.ajaxload.info/
http://preloaders.net/
http://www.loadinfo.net/
http://www.webscriptlab.com/
http://www.chimply.com/Generator
http://mentalized.net/activity-indicators/

Para finalizar, .grid representa el elemento o etiqueta en el cual se mostrará el cargador.. yo cuando lo utilicé fue para una tabla que paginaba vía ajax..

Posted from WordPress for Android

Co-fundador de Qbit Mexhico, usuario de linux, Developer en tecnologías web.. Nicaragüense, centro en basketball, primer centro en rugby y pintor los fines de semana. Ortögrafo y ambientalista psicológico (de escritorio).. ese soy yo!

Si te ha servido compártelo y difunde nuestro blog..

Facebook Twitter LinkedIn Google+ Flickr YouTube Skype 

Compartir en...Tweet about this on TwitterPin on Pinterest0Share on LinkedIn0Share on Google+0Share on Facebook0