Crear una barra de progreso estilo Youtube con jQuery

NProgress.js es un pequeño plugin jQuery para la creación de barras de progreso, o cargando, muy similar al que utilizan sitios como Youtube o Google.

Esta clase de recursos son muy interesantes de cara a mejorar la experiencia del usuario, su instalación es de lo más sencilla y prácticamente no necesita modificar en nada la estructura del sitio.

Ejemplo de uso:

La forma más sencilla de utilizar esta biblioteca es la siguiente:

NProgress.start();
NProgress.done();

Si por ejemplo, queremos fijar la barra de progreso en un valor determinado lo podemos lograr con las siguientes lineas de código:

NProgress.set(0.0);     // Sorta same as .start()
NProgress.set(0.4);
NProgress.set(1.0);     // Sorta same as .done()

Un detalle interesante de este proyecto es que cuenta con la capacidad de personalizar aspectos como la velocidad con la que se muestra la barra, para ello podemos utilizar la configuración:

NProgress.configure({ trickleRate: 0.02, trickleSpeed: 800 });

Si se encuentran interesados en este proyecto les recomiendo visitar la demostración online para ver una prueba en tiempo real de su funcionamiento.

Web: NProgress.js

Pablo: Programador desde hace más de 11 años, adicto a internet, cafeinómano, fanático de la información, intento de emprendedor, trabaja de forma compulsiva solo en lo que ama. Sueña con tener una aplicación con más de 1 millón de usuarios.
Entradas relacionadas