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.

barra de progreso estilo youtube

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

Categorizado en: