Shortcode web_progress_bar
El shortcode web_progress_bar muestra el componente de barra de progreso.
Los atributos siguientes coinciden con los controles actuales del Page Builder y con la salida pública. Usa la sintaxis raw solo para contenido revisado que no pueda mantenerse mediante los controles visuales.
Uso
[web_progress_bar progress_bar_title="Completion" progress_bar_progress_percent="75" progress_bar_color="12" progress_bar_progress_color="1"]Atributos
| Atributo | Predeterminado | Valores aceptados | Propósito |
|---|---|---|---|
progress_bar_title |
— | Texto con HTML en línea seguro | Añade un título visible descriptivo y un nombre accesible. |
progress_bar_title_position |
— | left, right |
Selecciona la posición del título. |
progress_bar_title_color |
— | Ranura de paleta 1–15 |
Color del título; vacío hereda el color del texto circundante. |
progress_bar_progress_percent |
50 |
Número, redondeado y limitado a 0–100 |
Porcentaje rellenado; una entrada no válida usa 50. |
progress_bar_color |
— | Ranura de paleta 1–15 |
Color de la pista completa; vacío es transparente. |
progress_bar_progress_color |
— | Ranura de paleta 1–15 |
Color de la parte rellenada; vacío es transparente. |
progress_bar_style |
default |
web-progress-xs, web-progress-sm, default, web-progress-md, web-progress-lg, web-progress-xlg |
Selecciona el estilo. |
progress_bar_animation |
yes |
yes habilita; vacío o no deshabilita |
Anima una vez cuando es visible, respetando el movimiento reducido. |
progress_bar_static_number |
— | yes habilita |
Coloca el número junto a la pista completa en lugar de debajo de la parte rellenada; esto no deshabilita la animación. |
device_visibility |
— | web-hide-on-xs, web-hide-on-sm, web-hide-on-md, web-hide-on-lg separados por espacios |
Oculta de forma independiente en los rangos responsive seleccionados. |
el_id |
Generado | ID HTML único válido | Identifica esta barra para enlaces y asociación del título accesible. |
el_class |
— | Clases CSS separadas por espacios | Aplica los helpers existentes del tema. |
Personalizar la hoja de estilos
Ve a Settings → POM Theme → Advanced → Custom CSS → Shortcode CSS assets → Progress bars para comparar el código fuente actual de progress-bars.min.css con una versión editable. Al guardar se crea un reemplazo minificado por sitio para el handle existente web-progress-bars. Revert to theme CSS elimina el reemplazo y restaura el asset actual del tema. Este estilo del componente también lo usa la vista previa de la Barra de progreso de Gutenberg.
La hoja de estilos del componente depende del contenido. El script web_progress_bars se solicita solo cuando la animación está habilitada, incluidas las barras cargadas a través del ciclo de vida AJAX del tema. Sin JavaScript, la etiqueta final y el relleno permanecen visibles. El shortcode sigue disponible aunque la administración del Page Builder esté deshabilitada.
Verificación
Comprueba el título, el porcentaje, el contraste de la paleta y cada rango de pantalla habilitado. Un relleno transparente o un valor de 0% muestra intencionadamente ningún segmento relleno. El movimiento reducido omite la animación; desplazarse fuera y volver no la reproduce.
Para la edición nativa, consulta Progress Bar in Gutenberg.