Widget de barra de progreso Elementor Circle gratuito
El widget gratuito Progress Bar de Elementor dibuja una línea recta. El widget Progress Bar en Master Addons también es gratuito y puede dibujar la barra como una línea, una línea con una burbuja porcentual, un indicador de ventilador de círculo completo o medio círculo. Dale un título y un valor de 0 a 100, elige un estilo preestablecido, luego colorea la barra llena y la pista detrás de ella. Funciona bien para objetivos de financiación, progreso del curso, calificaciones y estadísticas únicas. Para obtener una lista de barras de habilidades dentro de un widget, utilícelo Barras de progreso. Para una barra que se llena a medida que los visitantes se desplazan por una publicación, utilícela Barra de progreso de lectura.
Cómo agregar una barra de progreso circular en Elementor
El widget es parte del complemento gratuito Master Addons, por lo que todo lo que necesitas es Elementor y Master Addons.
- Instalar y activar Addones maestros de WordPress.org.
- Edite su página con Elementor y busque en el panel de widgets Barra de progreso.
- Arrástrelo a una columna. Para una fila de círculos, coloque un widget en cada columna.
- En Contenido, escriba el Título y establezca el Valor de 0 a 100.
- En Estilo, Estilos generales, configure los ajustes preestablecidos de estilo en Círculo o en Ventilador para un calibre de semicírculo.
- Establezca los colores y anchos de la barra frontal y la barra posterior, luego diseñe el texto Título y Valor.
Cada entorno está cubierto en el Configuración del widget de la barra de progreso guía.
Ajustes preestablecidos de línea, burbuja de línea, círculo y ventilador
Elija la forma en Estilo, Estilos generales, Preajustes de estilo. La línea es una barra horizontal plana con el título encima. Line Bubble agrega una etiqueta redonda que se desliza hasta el punto de llenado y muestra el porcentaje. Circle dibuja un anillo completo con el valor en el medio y Fan dibuja un medidor de semicírculo.
- Cambie los ajustes preestablecidos en cualquier momento y el título, el valor y los colores permanecerán como están.
- Color burbuja establece el relleno de la burbuja en Line Bubble.
- Posición de burbuja mueve la burbuja hacia arriba o hacia abajo contra la barra.
Título y valor
La pestaña Contenido tiene dos campos. Título es la etiqueta, como objetivo de recaudación de fondos o progreso del curso. Valor es un número del 0 al 100 (60 de forma predeterminada) que establece hasta qué punto se llena la barra, el anillo o el calibre y se muestra como porcentaje.
- El relleno se anima desde cero hasta su valor durante aproximadamente un segundo cuando se carga la página.
- No hay un máximo personalizado, por lo que 45 de 60 lecciones son 75.
- Un widget es un indicador. Duplíquelo para crear una fila de círculos o una pila de líneas.
Estilismo de barra delantera y barra trasera
Barra frontal es la parte llena y Barra trasera es la pista detrás de él. Cada uno tiene su propio color y un número de ancho para el grosor de la carrera, 5 de forma predeterminada. Una barra frontal gruesa sobre una pista ligera más delgada es fácil de leer, especialmente en los ajustes preestablecidos Circle y Fan.
- Los colores predeterminados son el morado (#704aff) en una pista gris claro (#ddd).
- Los colores son sólidos. No existe la opción de relleno degradado.
- El ancho es un número para todos los dispositivos, así que verifique el resultado en el móvil.
Título y Texto de Valor
El Título y Valor cada una de las secciones de estilo tiene un selector de color y un grupo de tipografía completo, por lo que el porcentaje puede ser mayor o más audaz que la etiqueta. En los ajustes preestablecidos de círculo y ventilador, el valor se encuentra dentro de la forma.
- El título se genera como un encabezado H6 y el valor predeterminado es negro.
- El color y la tipografía de valor también se aplican a la etiqueta Line Bubble.
Barra de progreso Elementor frente a barra de progreso Master Addons
Ambos widgets son gratuitos. La barra de progreso de Elementor es una barra recta que puede contener una línea de texto en su interior. Master Addons agrega formas redondas, por lo que la elección se reduce principalmente a la forma que necesita.
| Característica | Barra de progreso Elementor | Barra de progreso de complementos maestros |
|---|---|---|
| Precio | Gratis en Elementor | Gratis en complementos maestros |
| Formas | Sólo línea | Línea, Burbuja de Línea, Círculo y Ventilador |
| Valor | Control deslizante porcentual con etiquetas dinámicas | Número del 0 al 100 |
| Texto | Título con elección de etiqueta HTML, porcentaje de visualización, texto interno | Título (H6) y etiqueta porcentual |
| Tamaño de barra | Altura y radio de borde | Ancho de la barra delantera y la barra trasera |
| Colores | Color de barra y color de fondo | Colores de barra frontal y barra trasera, color burbuja |
| Animación | Se llena cuando la barra se desplaza hacia la vista | Se llena cuando se carga la página |
Utilice el widget de Elementor para obtener una línea simple que se anima a medida que los visitantes la alcanzan o extrae su valor de una etiqueta dinámica. Utilice complementos maestros cuando desee un anillo o un medidor. Widgets gratuitos relacionados: Barras de progreso para barras de habilidades en un widget, Barra de progreso de lectura para obtener un indicador de progreso de desplazamiento, y Contrarrestar para números animados.
Preguntas frecuentes para la barra de progreso
¿cuál es la diferencia entre la barra de progreso, las barras de progreso y la barra de progreso de lectura?
La barra de progreso (este widget) es un indicador que se muestra como una línea, una línea con una burbuja, un círculo o un indicador de ventilador. El Elemento Barras de Progreso es una lista de barras de habilidades horizontales que agregas dentro de un widget. Barra de progreso de lectura es una extensión que muestra qué tan lejos se ha desplazado un visitante por la página.
¿La barra de progreso se anima cuando se desplaza hacia la vista?
No. El relleno va desde cero hasta su valor en aproximadamente un segundo tan pronto como se carga la página, por lo que una barra muy abajo en la página puede terminar antes de que alguien la vea. La propia barra de progreso de Elementor y el widget Master Addons Progress Bars comienzan a llenarse cuando aparecen a la vista.
¿el widget Master Addons Progress Bar es gratuito?
Sí. Viene con el complemento Master Addons gratuito en WordPress.org y los cuatro ajustes preestablecidos se incluyen sin una licencia Pro.
¿Puedo hacer una barra de progreso circular para obtener una puntuación sobre 100?
Sí. Establezca ajustes preestablecidos de estilo en círculo y valor en la puntuación, por ejemplo 85. El anillo se llena al 85 por ciento con un 85% en el medio. Para obtener una puntuación de otro número, conviértala primero a un porcentaje, ya que el widget no tiene un máximo personalizado.
Widgets y extensiones de Elementor de tendencia
Cree sitios web sofisticados en menos tiempo.
Vidriomorfismo
Extras de contenedores
Patrones
![Extensión de duplicador de páginas/publicaciones de complementos maestros para Elementor: enlace de fila de duplicador MA en la lista de páginas de WordPress que crea una página de inicio - borrador [duplicado #128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicador de publicaciones/páginas
