# AX - Barra de progreso

## Resumen

**AX - Barra de Progreso** es un componente de Experience Cloud que muestra un indicador visual de progreso mostrando el porcentaje de finalización o el cumplimiento de un objetivo en las páginas de Experience Sites.

Úsalo para mostrar a los usuarios del portal su progreso hacia metas, el estado de finalización de procesos de varios pasos, el porcentaje de requisitos cumplidos o cualquier métrica numérica de progreso a partir de datos de Salesforce. Configura el valor de progreso, etiquetas, colores y estilo en Experience Builder.

Perfecto para la finalización de incorporación, seguimiento de objetivos, completitud del perfil, progreso de formación o en cualquier lugar donde los usuarios del portal necesiten retroalimentación visual sobre su avance hacia una meta.

## Configuración

{% tabs %}
{% tab title="🎛️ Propiedades" %}

<table><thead><tr><th>Nombre</th><th width="202">Descripción</th><th>Uso</th></tr></thead><tbody><tr><td><strong>Etiqueta</strong></td><td>El texto que se muestra para identificar el propósito de la barra de progreso.</td><td>Implementa esta propiedad para proporcionar a los usuarios una comprensión clara de qué progreso indica la barra.</td></tr><tr><td><h4>Valor</h4></td><td>Un valor numérico que representa el progreso actual.</td><td>Establece esta propiedad para reflejar el porcentaje o fracción de la tarea o proceso que se ha completado.</td></tr><tr><td><strong>Etiqueta del Valor</strong></td><td>La etiqueta que se mostrará junto al valor, a menudo como un porcentaje o fracción.</td><td>Utiliza esto para dar una representación textual del valor de progreso, proporcionando claridad a los usuarios.</td></tr><tr><td><strong>Posición del Valor</strong></td><td>Posición de la etiqueta de valor con respecto a la barra de progreso. Las opciones incluyen <code>Arriba Derecha</code>, <code>Izquierda</code>, <code>Derecha</code>, <code>Arriba Izquierda</code>, <code>Abajo Derecha</code>, y <code>Abajo Izquierda</code>.</td><td>Elige una posición del valor que mejore la legibilidad y se ajuste al diseño del contenido circundante.</td></tr><tr><td><strong>Tamaño</strong></td><td>El grosor de la barra de progreso. Las opciones incluyen <code>Completo</code>, <code>X-Pequeño</code>, <code>Pequeño</code>, <code>Medio</code>, y <code>Grande</code>.</td><td>Selecciona un tamaño que garantice que la barra de progreso sea conspicua y armoniosa con el diseño general.</td></tr><tr><td><strong>Orientación</strong></td><td>La dirección en la que se llena la barra de progreso. Se puede configurar en <code>Horizontal</code> o <code>Vertical</code>.</td><td>Alinea la orientación con el diseño y la dirección del flujo de contenido para una visualización intuitiva del progreso.</td></tr><tr><td><strong>Mostrar Valor</strong></td><td>Un interruptor para mostrar u ocultar la etiqueta del valor de progreso.</td><td>Utiliza esta configuración para presentar el progreso numérico directamente en la barra como referencia para el usuario o para mantener el diseño limpio y minimalista.</td></tr><tr><td><strong>Variante</strong></td><td>La forma de la barra de progreso. Las opciones son <code>Base</code> para una barra recta o <code>Circular</code> para un indicador de progreso redondo.</td><td>Elige una variante que mejor se ajuste al motivo de diseño del sitio y al tipo de progreso que se muestra.</td></tr><tr><td><strong>Texturizada</strong></td><td>Añade un efecto texturizado a la barra de progreso para un detalle visual adicional.</td><td>Aplica esta propiedad para crear una apariencia más dinámica y táctil en la barra de progreso.</td></tr><tr><td><strong>Tema</strong></td><td>Temas de color predefinidos que indican la naturaleza o el estado del progreso. Los temas disponibles incluyen <code>Base</code>, <code>Alterno Inverso</code>, <code>Error</code>, <code>Información</code>, <code>Inverso</code>, <code>Sin Conexión</code>, <code>Éxito</code>, y <code>Advertencia</code>.</td><td>Selecciona un tema para transmitir distintos significados—por ejemplo, usa <code>Éxito</code> para tareas completadas o <code>Advertencia</code> para acciones pendientes.</td></tr><tr><td><strong>Grosor</strong></td><td>Ajusta el grosor de la barra de progreso. Las opciones incluyen <code>Medio</code>, <code>X-Pequeño</code>, <code>Pequeño</code>, y <code>Grande</code>.</td><td>Elige el grosor que garantice la prominencia de la barra de progreso y su compatibilidad estética con otros elementos del sitio.</td></tr></tbody></table>
{% endtab %}

{% tab title="🎨 Estilizado" %}

{% endtab %}
{% endtabs %}