Barras de progreso con jQuery: 7 librerías y demo

Si necesitas mostrar una barra de progreso con jQuery (una carga, un formulario en varios pasos, una animación de porcentaje), aquí tienes 7 librerías gratuitas y una demo interactiva para que veas cómo se comportan antes de elegir.

He revisado esta selección (publicada originalmente en 2014) y la he actualizado con librerías verificadas y una demo real, después de comprobar que las capturas de pantalla originales ya no cargaban bien.

Demo interactiva: barra de progreso con jQuery UI

Antes de elegir librería, mira cómo se comporta una barra de progreso animada en tiempo real. Pulsa el botón y observa cómo sube el valor:

Esta demo usa JavaScript puro (sin dependencias) para que funcione en cualquier tema; el mismo efecto se consigue con el widget .progressbar() de jQuery UI si ya tienes esa librería cargada en tu proyecto.

7 librerías para barras de progreso y carga

• NProgress: la barra fina superior que ves en YouTube o Medium mientras carga la página. Ligera, sin dependencias de jQuery.
• jQuery UI Progressbar: el widget oficial de jQuery UI, la opción más estable si ya usas esa librería en tu proyecto. La demo de arriba se basa en su comportamiento.
• Spin.js: genera un indicador de actividad (spinner) sin imágenes, todo en CSS/SVG generado por JavaScript — útil cuando no conoces el porcentaje exacto de avance.
• CProgress: barra de progreso circular con jQuery, buena opción cuando el espacio es reducido (widgets, tarjetas).
• Circle Progress (Canvas): progreso circular animado usando Canvas, alternativa a CProgress con otro estilo visual.
• ProgressBar.js: no depende de jQuery, pero merece estar en la lista por ser la opción más moderna: barras SVG animadas y muy personalizables, buena alternativa si estás empezando un proyecto nuevo sin jQuery.
• CSS Load: generador online de spinners y barras de carga en CSS puro, útil si solo necesitas un indicador visual simple sin lógica de porcentaje.

¿Cuál elegir según tu proyecto?

Si ya cargas jQuery UI en tu proyecto, usa su Progressbar nativo: es la opción con menos piezas nuevas que mantener. Si necesitas la barra fina de «cargando página» tipo YouTube, NProgress es la más directa. Para un indicador circular en poco espacio, CProgress o Circle Progress encajan mejor que una barra horizontal.

Mi recomendación: si estás arrancando un proyecto nuevo sin dependencia de jQuery, valora ProgressBar.js directamente — jQuery ya no es imprescindible en 2026 para este tipo de componente, y una librería sin dependencias pesa menos en la página.

Preguntas frecuentes

¿Necesito jQuery para usar estas barras de progreso?

Depende de la librería: jQuery UI Progressbar, CProgress y Circle Progress sí lo necesitan. NProgress y ProgressBar.js funcionan sin jQuery, con JavaScript puro.

¿Cuál es la diferencia entre una barra de progreso y un spinner?

La barra de progreso muestra un porcentaje de avance real (0-100%); el spinner solo indica que algo está cargando, sin comunicar cuánto falta.

¿Puedo usar el elemento nativo <progress> de HTML5 en vez de jQuery?

Sí, y es buena opción si no necesitas personalización avanzada. Tienes el detalle en mi guía de HTML5 progress bar.

¿Estas librerías son accesibles?

No todas por defecto: añade siempre los atributos ARIA (role="progressbar", aria-valuenow, aria-valuemin, aria-valuemax) al contenedor, lo generen o no automáticamente.

Si te ha sido útil, compártelo con quien lo pueda necesitar.