> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/experience-components/ax-progress-bar.md).

# AX - Barra de progreso

## Resumen

**AX - Barra de progreso** es un componente de Experience Cloud que muestra un indicador visual de progreso que señala el porcentaje de completitud o el logro de un objetivo en páginas de Experience Sites.

Úsalo para mostrar a los usuarios del portal su progreso hacia objetivos, 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, las etiquetas, los colores y el estilo en Experience Builder.

Perfecto para la finalización de la incorporación, el seguimiento de objetivos, la completitud del perfil, el progreso de la formación o cualquier lugar en el que los usuarios del portal necesiten información visual sobre su avance hacia un objetivo.

## 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 está indicando la barra.</td></tr><tr><td><h4>Valor</h4></td><td>Un valor numérico que representa el progreso actual.</td><td>Configura esta propiedad para reflejar el porcentaje o la 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 porcentaje o fracción.</td><td>Úsalo 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 del valor con respecto a la barra de progreso. Las opciones incluyen <code>Arriba a la derecha</code>, <code>Izquierda</code>, <code>Derecha</code>, <code>Arriba a la izquierda</code>, <code>Abajo a la derecha</code>, y <code>Abajo a la izquierda</code>.</td><td>Elige una posición del valor que mejore la legibilidad y se adapte 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>Extra pequeño</code>, <code>Pequeño</code>, <code>Mediano</code>, y <code>Grande</code>.</td><td>Selecciona un tamaño que garantice que la barra de progreso sea visible y esté en armonía con la disposición general del diseño.</td></tr><tr><td><strong>Orientación</strong></td><td>La dirección en la que se rellena la barra de progreso. Se puede establecer en <code>Horizontal</code> o <code>Vertical</code>.</td><td>Alinea la orientación con la disposición y la dirección del flujo del 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>Usa esta configuración para mostrar el progreso numérico directamente en la barra como referencia para el usuario o para mantener un 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 se adapte mejor al estilo visual del sitio y al tipo de progreso que se muestra.</td></tr><tr><td><strong>Texturizado</strong></td><td>Añade un efecto texturizado a la barra de progreso para aportar un detalle visual adicional.</td><td>Aplica esta propiedad para crear una apariencia más dinámica y táctil para 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>Alt inversa</code>, <code>Error</code>, <code>Información</code>, <code>Inversa</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>Mediano</code>, <code>Extra 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="🎨 Estilo" %}

{% endtab %}
{% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/experience-components/ax-progress-bar.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.