¿Necesitas Maquetar o Diseñar una web? ... Consulta nuestra sección Maquetación Freelance o solicita presupuesto a elmaquetadorweb@gmail.com

15.8.18

Cómo crear una barra de progreso en HTML - jQuery - JavaScript progress bar plugins

Actualmente el uso de barras de progreso en HTML es muy variado y extendido.

Las podemos utilizar para mostrar cualquier porcentaje ya sea de carga de nuestra web, de archivos, de tiempo de lectura, mostrar cantidades en una campaña de co-founding o mostrar una serie de pasos cuando nos damos de alta en una web o rellenamos un formulario.

A continuación os mostramos una serie de plugins hechos en jQuery - JavaScript que más nos han llamado la atención, ya sea por su funcionalidad, o por su sencilla configuración.

Animated Goal Progress Bar jQuery plugin > Plugin de jQuery para crear una barra de progreso animada en una capa vacía. Contiene parámetros para definir una cantidad total, cantidad actual y añadir texto dentro de la capa.

jQMeter > Plugin de jQuery sencillo y simple que nos permite animar barras de progreso horizontales o verticales. Se puede modificar opciones como ancho, alto, colores...  para conseguir el aspecto que se desea.

ProgressBar.js > Plugin de jQuery responsive (totalmente compatible con móviles) para animar cualquier forma vectorial SVG como líneas, cuadrados, círculos, semicírculos... muy recomendable para utilizar pantallas de carga en tu web. Compatible con IE9

LoadGo > Plugin de JavaScript que nos permite crear una barra de progreso usando nuestras propias imágenes. Perfecto para la animación de logos. Crea una capa encima de la imagen que simula el proceso de carga usando las dimensiones de la imagen. Compatible con IE9.

jquery-circle-progress > Plugin de jQuery para animar círculos.

Progress Step > Plugin de jQuery que crea una barra de progreso numérica por pasos. Muy recomendable para usarlo en cualquier proceso guiado por pasos, como por ejemplo en un alta de usuario.

jQuery Progression JS >  Plugin de jQuery que nos muestra a tiempo real el progreso que nos queda para completar cualquier formulario.

Por último comentaros si lo que queréis es una barra de progreso que muestre el tiempo de lectura en nuestra web, podéis consultar la noticia que publicamos sobre prognroll hace unos meses.

Como siempre os animamos a comentar y compartir otros plugins que halláis utilizado con éxito.

No hay comentarios:

Publicar un comentario