Cree barras de progreso personalizadas con ProgressBar.js
Barras de progreso son ampliamente conocidos por la mayoría de los usuarios en la web. Para los desarrolladores, a menudo es un proceso complicado crear una barra de progreso desde cero. Pero con ProgressBar.js no tienes que!
Esta biblioteca gratuita de código abierto. no tiene dependencias y soporta todos los principales navegadores, incluyendo IE9+.
Por defecto, puedes usa una barra simple, o tu puedes Selecciona entre algunas formas básicas., como:
- Linea sola
- Semicírculo
- Círculo completo
- Cuadrado
- Triángulo
También puedes diseñar tus propias formas personalizadas como un corazón, una nube o incluso las letras del logotipo de su sitio web. Por supuesto, esto requerirá un poco de esfuerzo, pero el resultado final puede ser increíble..
La biblioteca trabaja en rutas SVG, así que si puedes construir una forma perfilada utilizando el marcado SVG puedes animalo con esta barra de progreso de la biblioteca.
Animaciones tambien pueden incluir texto o tener patrones personalizados de inicio / parada. La API completa tiene Más detalles con opciones / devoluciones de llamada. que puedes leer a tu antojo.
ProgressBar.js también tiene una pequeña guía de instalación Donde puedes descargar y configurar el script usando Bower, npm, o la página GitHub más simplificada.
Y si construyes algo genial puedes envíe su código en el repositorio de GitHub. El creador del proyecto, Kimmo Brunfeldt tiene un abrir problema GitHub Donde puedes enviar diseños personalizados para ser incluido en la biblioteca.
Usted puede añadir barras de progreso animadas para registrarse, cargar campos o en cualquier página web como precargador. Las opciones solo están limitadas por que detallado estas dispuesto a conseguir.
Por ejemplo, me gusta la demo del medidor de fuerza de contraseñas ya que sirve un propósito real y Beneficia la experiencia del usuario.. Este ejemplo viene empaquetado con el plugin, Para que puedas copiarlo y modificarlo a tu gusto..
Para ver más ejemplos, Visite la página de inicio de ProgressBar.js o eche un vistazo a este fiddle demoing the heart animation.
