Crear barra de progreso de diseño de material fácilmente con Mprogress.js
No se puede negar que el diseño material de Google ha cambiado radicalmente la web. Ofrece un lenguaje de diseño común que los diseñadores de UI pueden aplicar a todos los sitios web y aplicaciones móviles.
Esta tendencia de diseño de materiales ha llevado a muchas bibliotecas, incluido el popular marco Materialise. Y uno de los mejores nuevos proyectos materiales que he encontrado es Mprogress.js .
Esta biblioteca de JavaScript genera una barra de progreso de estilo material utilizando CSS y JavaScript puros. Sin dependencias, sin tonterías. Simplemente carga (y precarga) con una apariencia de diseño de materiales 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.
![](http://hideout-lastation.com/img/tech-design-tips/576/create-material-design-progress-bar-easily-with-mprogress.jpg)
Esto se puede hacer con literalmente una línea de código :
var mprogress = new Mprogress ('inicio');
Se pueden aplicar otras propiedades para cambiar el tiempo de la animación, la velocidad o el color de la barra de progreso. Esta configuración incluso le permite crear plantillas personalizadas basadas en el estilo de diseño de materiales 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 la necesidad de construir uno desde cero.
Puede ejecutar métodos como set()
para establecer un porcentaje o inc()
para incrementar la barra de carga . Se puede manejar mediante programación para crear un cargador HTTP, pero eso requiere trabajo adicional en JavaScript.
![](http://hideout-lastation.com/img/tech-design-tips/576/create-material-design-progress-bar-easily-with-mprogress-2.jpg)
Hay tanto que puedes hacer con esta biblioteca y con cero dependencias puedes usarla para cualquier proyecto web. Para comenzar, consulte el repositorio MProgress en GitHub, donde también puede examinar la documentación .
![20 posavasos creativos que definitivamente te encantará](http://hideout-lastation.com/img/tech-design-tips/492/20-creative-coasters-you-ll-definitely-love.jpg)
20 posavasos creativos que definitivamente te encantará
Dicen que "el hogar es donde está el corazón", aún así, no hace daño decorar tu casa de la manera que quieres . Hay muchas formas en que puede hacer que su lugar sea más cómodo, por ejemplo, instalando artefactos de iluminación o transformando el espacio adicional debajo de las escaleras. Lo que
![20+ Bookmarklet Alternativa a tus extensiones favoritas](http://hideout-lastation.com/img/tech-design-tips/631/20-bookmarklet-alternative-your-favorite-extensions.jpg)
20+ Bookmarklet Alternativa a tus extensiones favoritas
Si su navegador se ha vuelto lento y lento, puede intentar solucionar el problema desactivando o eliminando extensiones innecesarias (en complementos dependiendo del navegador que esté usando). Sin embargo, si no puede soportar la idea de perder una de sus preciosas extensiones, probablemente haya un bookmarklet que pueda hacer lo mismo que su extensión .L