jQuery showLoading plugin – Mostrar una barra de progreso

jQuery showLoading es un plugin para mostrar un indicador o barra de progreso o de carga sobre un área designada de la página.

Simplemente para mostrar el mencionado indicador, se necesita agregar un DIV con un ID.

Este recurso corre con las versiones de la biblioteca jQuery 1.3.2 y 1.4.2. Está probado en los navegadores: IE6, IE7, Firefox, Chrome y Safari además y posee un amplio conjunto de parámetros que posibilitan un alto grado de personalización.

Código de ejemplo

Para implementar showLoading en cualquier página, es necesario usar un código similar al siguiente:

jQuery(document).ready(
function() {
//
// When a user clicks the 'loading-default' link,
// call showLoading on the activity pane
// with default options
//
jQuery('a.loading-default').click(
function() {
jQuery('#activity_pane').showLoading();
}
);
//
// When a user clicks the 'loading-ajax' link,
// call showLoading before performing the 'load'
//
jQuery('a.load-ajax').click(
function() {
jQuery('#activity_pane').showLoading();
jQuery('#activity_pane').load( '/some/url',
function() {
// callback fires after ajax load completes
jQuery('#activity_pane').hideLoading();
}
);
}
);
//
// When a user clicks the 'loading-bars' link,
// call showLoading with addClass specified
//
jQuery('a.loading-bars').click(
function() {
jQuery('#activity_pane').showLoading(
{
'addClass': 'loading-indicator-bars'
}
);
}
);
//
// When a user clicks the 'loading-hide' link,
// call hideLoading on the activity pane
//
jQuery('a.loading-hide').click(
function() {
jQuery('#activity_pane').hideLoading();
}
);
}
);

jQuery showLoading plugin

Descargar/documentación: www.contextllc.com/blog/2010/06/jquery-showloading-plugin-show-loading-graphic-over-specific-element