Cree la barra de progreso de diseño de materiales fácilmente con Mprogress.js

No se puede negar que Google diseño de materiales Ha cambiado radicalmente la web. Ofrece una lenguaje de diseño común que los diseñadores de IU pueden aplicar a todos los sitios web y aplicaciones móviles.

Esta tendencia de diseño de material ha llevado a muchas bibliotecas, incluido el popular marco Materialise. Y uno de los mejores proyectos de material nuevo He encontrado es Mprogress.js.

Esta biblioteca de JavaScript genera un barra de progreso de estilo material usando CSS puro y JavaScript. Sin dependencias, sin tonterias Solo carga (y carga) con una apariencia de diseño de material que coincidirá con cualquier sitio web o aplicación web.

La configuración es bastante simple y solo requiere dos archivos: un CSS y un script JS de Mprogress.

Usted puede descargar ambos desde el repositorio de GitHub o usar un administrador de paquetes tales como npm o Bower. A partir de ahí, necesitas crear un nuevo objeto Mprogress y dile que arranque el cargador.

Esto se puede hacer literalmente una línea de código:

 var mprogress = new Mprogress ('start'); 

Otras propiedades se puede aplicar para cambiar el tiempo de animación, la velocidad o el color de visualización de la barra de progreso. Esta configuración incluso te permite crear plantillas personalizadas basado en el estilo de diseño de material predeterminado. Increíble!

Echa un vistazo a la página de demostración Para ver este cargador en acción. No es una barra de carga fascinante, sin embargo, ofrece una buena solución sin necesidad de construir una desde cero.

Puede ejecutar métodos como conjunto() a establecer un porcentaje o Cía() a incrementar la barra de carga. Se puede manejar mediante programación para crear un cargador HTTP, pero eso requiere trabajo extra en JavaScript.

La belleza de Mprogress.js es su simplicidad. No le dice cómo estructurar los datos o qué necesita cargar. Podría estar cargando la página, o podría estar manejando una carga de archivos. O podría estar rastreando hasta qué punto se ha desplazado el usuario desde la parte superior de la página.

Hay tanto que puedes hacer con esta biblioteca y con cero dependencias Puedes usarlo para cualquier proyecto web. Para empezar, echa un vistazo a la MProgress repo en GitHub, donde también puede navegar por el documentación.