⏳ 4 Mejores plugins de barra de progreso para WordPress 2026 (gratuitos y de pago)

Un lector abre una página, ve una pared interminable de texto y se va. No porque el contenido sea malo. El cerebro necesita una referencia visible: cuánto falta por leer, en qué punto del proceso estoy. Una barra de progreso resuelve este problema mediante pura psicología de la percepción.

Pero elegir un plugin para esta tarea es otra historia. Uno está diseñado para barras de habilidades en portafolios, otro para un preloader de pantalla completa, un tercero se disfraza de bloque de Gutenberg. Si se equivoca, termina con un pesado constructor de sitios para una pequeña franja.

A continuación, cuatro plugins de barra de progreso para WordPress probados para 2026. Gratuitos y de pago, basados en shortcode y en bloques, cada uno para su propio escenario.

💡 Resumen rápido:

• Determine dónde necesita una barra de progreso: indicador de lectura, barra de habilidades, preloader o bloque de Gutenberg; la elección del plugin depende de esto.
• Para barras de habilidades y portafolios, elija Progress Bar & Skill Bar: gratuito, ligero, 34 diseños en la versión Pro.
• Si necesita un constructor visual con barras circulares, lineales y verticales sin depender de shortcodes, StichyX Bar con vista previa en vivo y gráficos SVG.
• Para usuarios de Gutenberg, Ultimate Blocks: barra de progreso como bloque nativo del editor más otros 35 bloques en el paquete.
• Para un preloader con pantalla de bienvenida animada, PageLoader, pago único de $26.

Tabla comparativa de plugins

1. Progress Bar & Skill Bar

Un plugin de WpShopMart para quienes necesitan «mostrar habilidades en porcentajes» sin dependencias adicionales. Instale, active, genere un shortcode y la barra ya está en la página. Sin editor de bloques, sin interfaz de construcción: acceda, configure colores y porcentajes, copie [PROGRESSBAR_WP id=xx].

La versión gratuita tiene dos diseños: circular y lineal. Ambos están animados, la barra se llena de color desde 0 hasta el valor especificado al hacer scroll. Por debajo utiliza una cuadrícula Bootstrap, por lo que la adaptación a móviles, tabletas y escritorios funciona sin configuración adicional.

La versión Pro por $8 (Personal, 1 sitio) o $24 (Business, ilimitado) amplía la biblioteca a 34 plantillas y añade ordenación de elementos arrastrando y soltando. Incluye un gráfico de medio pastel, gráfico semicircular, fondos seccionales, fuentes ajustadas con precisión y barras de habilidades ilimitadas por página.

Ventajas:

• La versión gratuita es completamente funcional, sin limitaciones artificiales.
• El shortcode se inserta en cualquier lugar: en una entrada, widget, tema.
• 52 reseñas en WordPress.org con una calificación promedio de 4.5.
• Basado en Bootstrap, no entra en conflicto con la mayoría de los temas.

Desventajas:

• No está actualizado para las últimas versiones mayores de WordPress (v1.5.0 probado hasta 6.7.5).
• La versión gratuita está limitada a dos diseños.
• La interfaz de configuración es visualmente anticuada.

💵 Gratis / Pro desde $8.

🔗 Descargar en WordPress.org | 🔗 Versión Pro

2. StichyX Bar

Si los diseños estándar no le sirven y no tiene tiempo para codificar barras personalizadas manualmente, StichyX Bar le ofrece un constructor visual con vista previa en vivo directamente en el panel de administración. Horizontal, vertical, SVG circular: la geometría se define en un minuto, sin una sola línea de CSS.

Por debajo utiliza JavaScript puro, sin jQuery, sin bibliotecas de terceros (excepto Chart.js para gráficos). El renderizado SVG mantiene la nitidez en pantallas retina, y la configuración de animación, de 500 a 5000 ms, le permite ajustar el comportamiento al ritmo de la página. Disparadores: scroll, hover o clic.

El Constructor de Grupos merece una mención especial: varias barras se ensamblan en una cuadrícula de 1 a 3 columnas y se animan en cascada. Para una página de portafolio o «Sobre el equipo», una cuadrícula de habilidades lista sin necesidad de un plugin de maquetador visual. Los emojis e iconos dentro de la barra son compatibles de forma nativa.

El plugin está en desarrollo activo: v1.2.3 de junio de 2026, integración con Elementor y Gutenberg, soporte para ACF para datos dinámicos. Gratuito, sin complicaciones de versión Pro.

Ventajas:

• Constructor visual con vista previa en vivo en el panel de administración.
• Tres geometrías (horizontal, vertical, SVG circular) en un solo plugin.
• Constructor de Grupos para cuadrículas de habilidades con animación en cascada.
• JavaScript vanilla, no carga jQuery.

Desventajas:

• Solo 10 instalaciones activas en WordPress.org, el plugin es muy nuevo.
• Un solo desarrollador, sin garantía de soporte a largo plazo.
• Sin preloader ni indicador de lectura (solo barras de contenido).

💵 Gratis.

🔗 Descargar en WordPress.org

3. Ultimate Blocks

No es solo un plugin de barra de progreso, sino un conjunto completo de 36 bloques de Gutenberg, uno de los cuales es la barra de progreso. Se instala como un bloque normal en el editor: seleccione círculo o línea, defina color, grosor, porcentajes y la barra se anima al hacer scroll.

La principal ventaja de Ultimate Blocks es el contexto. La barra de progreso aquí no es una herramienta aislada, sino parte de un ecosistema: en la misma entrada puede añadir un acordeón (Content Toggle), una tabla de contenidos, una llamada a la acción o un bloque de reseña con marcado schema. Sin shortcodes, todo es nativo en Gutenberg.

El plugin se desarrolla activamente: versión 3.5.7 de junio de 2026, más de 50 000 instalaciones activas, 728 reseñas con una calificación media de 5 estrellas. La versión gratuita es generosa: barra de progreso, filtro de contenido, valoración con estrellas y un par de docenas más de bloques sin pagar.

Ventajas:

• Integración total con Gutenberg, sin necesidad de aprender una interfaz nueva.
• 36 bloques en un solo plugin, la barra de progreso es solo uno de ellos.
• Desarrollo activo (actualización de junio de 2026).
• Marcado schema en los bloques de reseña y guía paso a paso (HowTo).

Desventajas:

• La barra de progreso no es el foco principal, sino una de 36 funciones.
• No es adecuado para temas que no usan Gutenberg.
• Algunos bloques (cupón, línea de tiempo) solo están disponibles en la versión Pro.

💵 Versión gratuita / Pro.

🔗 Descargar en WordPress.org

4. PageLoader

PageLoader resuelve una tarea adyacente: no un indicador de lectura o una barra de habilidades, sino un preloader de pantalla completa con barra de progreso. Un visitante llega al sitio y ve una pantalla de bienvenida con una carga animada. Cuando la página está lista, el preloader desaparece suavemente.

En los ajustes usted define un tiempo de espera o un porcentaje de carga real, una imagen de fondo (propia o de la biblioteca), un icono y un texto. La barra de progreso puede colocarse en cualquier lugar de la pantalla; además, puede ajustar su color y grosor. El editor en vivo integrado muestra los cambios en tiempo real, sin necesidad de alternar entre el panel de administración y el sitio.

El plugin es compatible con todos los temas y dispositivos. Se vende en CodeCanyon sin versión gratuita: pago único, no una suscripción.

Ventajas:

• El único preloader de pantalla completa de la selección.
• Editor en vivo con vista previa instantánea.
• Control preciso del tiempo de carga.
• Animaciones de aparición y desaparición suaves.

Desventajas:

• Solo versión de pago ($26).
• No es adecuado para barras de habilidades ni indicadores de lectura.
• No se actualiza a través del repositorio de WordPress.org.

💵 $26 pago único (12 meses de soporte).

🔗 Página en CodeCanyon | 🔗 Demo en vivo

Las barras de progreso son una microfuncionalidad y no tiene sentido pagar de más por un constructor de sitios con 50 bloques. Aquí tiene tres reglas para elegir.

Si el sitio usa el editor clásico y necesita barras de habilidades, elija Progress Bar & Skill Bar. El shortcode [PROGRESSBAR_WP id=xx] se inserta en cualquier bloque de texto, widget o tema. La versión gratuita cubre el 80% de las necesidades, y la Pro por $8 amplía el diseño.

Si necesita un constructor visual y varias geometrías sin atarse a un editor específico, StichyX Bar con vista previa en vivo y gráficos SVG. Las barras horizontales, circulares y verticales se configuran en el panel de administración en un minuto.

Si el sitio está en Gutenberg y la barra de progreso es solo una de las necesidades, instale Ultimate Blocks. La barra de progreso viene acompañada de tabla de contenidos, acordeón, CTA y bloque de reseñas. Un solo plugin en lugar de cinco.

Si necesita un preloader de pantalla completa, PageLoader. La única herramienta de la selección para una pantalla de bienvenida de carga, con un pago único sin suscripciones.

En el video anterior, un proceso paso a paso para instalar y configurar una barra de progreso en WordPress: desde la elección del plugin hasta la publicación en una página.

⁉️🤔 Preguntas frecuentes

¿En qué se diferencia una barra de progreso de un preloader?

Una barra de progreso muestra un porcentaje dentro del contenido: habilidad, etapa de un embudo, indicador de lectura. Un preloader es una pantalla de bienvenida antes de que cargue el sitio: el visitante ve una barra o animación mientras la página se renderiza. PageLoader es un preloader; Progress Bar & Skill Bar y StichyX Bar son barras de contenido.

¿Puedo instalar una barra de progreso sin un plugin?

Técnicamente sí, mediante HTML <progress>, animaciones CSS y JavaScript. Pero sin un plugin usted pierde: editor visual, adaptabilidad inmediata a distintos dispositivos e inserción sencilla mediante shortcode o bloque. Para un usuario no técnico, un plugin ahorra de 2 a 3 horas de codificación manual por cada barra.

¿Qué plugin es mejor para Gutenberg?

Ultimate Blocks, el único de la selección con un bloque nativo de Gutenberg. La barra de progreso se inserta como un bloque y los ajustes aparecen en la barra lateral del editor. No necesita salir de la interfaz, copiar shortcodes ni cambiar al panel de administración. StichyX Bar también soporta un bloque de Gutenberg, pero su enfoque es un constructor visual, no un ecosistema de bloques.

¿Afecta una barra de progreso a la velocidad del sitio?

Un plugin de calidad (Progress Bar & Skill Bar, StichyX Bar) añade de 2 a 5 KB de CSS y de 1 a 3 KB de JS, lo cual no afecta al LCP. Ultimate Blocks carga más porque incluye 36 bloques, pero lo hace de forma asíncrona y solo aquellos que se utilizan. Los preloaders (PageLoader) se cargan primero y pueden añadir de 200 a 500 ms al FCP, algo que vale la pena considerar. Los cuatro plugins de la selección cargan los estilos de forma asíncrona y no bloquean el renderizado.

¿Necesito la versión Pro para las barras circulares?

Depende del plugin. Progress Bar & Skill Bar: barras circulares solo en Pro ($8). StichyX Bar: barras circulares SVG gratuitas en el constructor visual. Ultimate Blocks: barras circulares y lineales gratuitas en el bloque de Gutenberg.

💎 Qué instalar en 2026: resumen final

No hay una respuesta universal, el escenario dicta la elección.

• Si el sitio está en el editor clásico y necesita barras de habilidades, Progress Bar & Skill Bar. 34 diseños en Pro, shortcode sin dependencia del editor, basado en Bootstrap.
• Si necesita varias geometrías con vista previa en vivo, StichyX Bar. Constructor visual, círculos SVG, cuadrículas de habilidades y ni una línea de CSS.
• Si el sitio vive en Gutenberg, Ultimate Blocks. Barra de progreso como bloque nativo más tabla de contenidos, acordeón y CTA en un solo plugin.
• Si necesita una pantalla de bienvenida de carga, PageLoader. La única opción entre las cuatro que cubre específicamente un preloader, no barras de contenido.

Comience con el Progress Bar & Skill Bar gratuito: en 5 minutos instalará la primera barra y entenderá si dos diseños le son suficientes. ¿Y usted qué plugin de barra de progreso utiliza? Escríbalo en los comentarios.