# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/experience-components/ax-barra-de-progreso.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.