Cuando una página tarda en mostrar resultados la mejor manera de mostrarselo al usuario es utilizando algun tipo de mensaje mostrando al visitante que la página se está cargando.

Existen multitud de imágenes .gif o pre-cargadores en flash, pero si lo que queremos es algo un poco con un poco más de estilo y sobre todo sin utilizar flash, esta forma puede ser que te interese ya que no es el típico cargador que no sabes donde ubicarlo dentro de tu página web para que el usuario sepa exactamente porque no se muestra la petición que ha hecho.

PrettyLoader es un pequeño plugin jQuery con el que se mostrará un pre-cargador siguiendo el cursor del ratón, teniendo asi la certeza de que el visitante sabrá en todo momento que la petición se está cargando, evitando así que el visitante se canse de esperar por no saber que ocurre.

El plugin pesa menos de 4Kb, muy interesante para aquellos (bien acostumbrados) que se preocupan por el peso de una página web.

Para ver la documentación del plugin PrettyLoader, puedes acceder a este enlace.

¿Que navegadores soporta PrettyLoader?

Los navegadores que soporta son los siguientes:

  • Firefox 2.0+
  • Safari 3.1.1+
  • Opera 9+
  • Internet Explorer 6.0+

Descarga de PrettyLoader

Descargar Version Completa

Descargar Version Comprimida

¿Cómo usarlo?

Una vez descargado el plugin, tenemos que indicar en dentro de las etiquetas HEAD lo siguiente:

PLAIN TEXT
HTML:
  1. script src="js/jquery.js" type="text/javascript" charset="utf-8">
  2.  
  3. <script src="js/jquery.prettyLoader.js" type="text/javascript"></script>

Para inicializar Prettyloader, pon el siguiente código antes de cerrar la etiqueta BODY

PLAIN TEXT
JAVASCRIPT:
  1. <script type="text/javascript">// <![CDATA[
  2.     $(document).ready(function(){
  3.         $.prettyLoader();
  4.     });
  5. // ]]></script>

Para configurarlo puedes usar el siguiente código:

PLAIN TEXT
JAVASCRIPT:
  1. <script type="text/javascript">// <![CDATA[
  2.     $(document).ready(function(){
  3.         $.prettyLoader({
  4.             animation_speed: 'fast', /* fast/normal/slow/integer */
  5.             bind_to_ajax: true, /* true/false */
  6.             delay: false, /* false OR time in milliseconds (ms) */
  7.             loader: '/prettyLoader/images/prettyLoader/ajax-loader.gif', /* Path to your loader gif */
  8.             offset_top: 13, /* integer */
  9.             offset_left: 10 /* integer */
  10.         });
  11.     });
  12. // ]]></script>

Una vez tenemos hecho el trabajo de llamada, inicialización, etc .. procedemos a usarlo de la siguiente manera:

$.prettyLoader.show();
Muestra el Loader

$.prettyLoader.show(2000);
Muestra el loader y lo oculta después de 2 segundos

$.prettyLoader.hide();
Oculta el loader

Vía: No margin for errors

Posts Relacionados