> 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-it/experience-components/ax-progress-bar.md).

# AX - Barra di avanzamento

## Panoramica

**AX - Barra di avanzamento** è un componente di Experience Cloud che mostra un indicatore di avanzamento visivo che visualizza la percentuale di completamento o il raggiungimento di un obiettivo nelle pagine dei siti Experience.

Usalo per mostrare agli utenti del portale il loro avanzamento verso gli obiettivi, lo stato di completamento di processi a più fasi, la percentuale di requisiti soddisfatti o qualsiasi metrica numerica di avanzamento dai dati Salesforce. Configura il valore di avanzamento, le etichette, i colori e lo stile in Experience Builder.

Perfetto per il completamento dell'onboarding, il monitoraggio degli obiettivi, la completezza del profilo, i progressi della formazione o ovunque gli utenti del portale abbiano bisogno di un riscontro visivo sul loro avanzamento verso un obiettivo.

## Impostazioni

{% tabs %}
{% tab title="🎛️ Proprietà" %}

<table><thead><tr><th>Nome</th><th width="202">Descrizione</th><th>Utilizzo</th></tr></thead><tbody><tr><td><strong>Etichetta</strong></td><td>Il testo visualizzato per identificare lo scopo della barra di avanzamento.</td><td>Implementa questa proprietà per fornire agli utenti una comprensione chiara di quale avanzamento stia indicando la barra.</td></tr><tr><td><h4>Valore</h4></td><td>Un valore numerico che rappresenta l'avanzamento attuale.</td><td>Imposta questa proprietà per riflettere la percentuale o la frazione dell'attività o del processo che è stata completata.</td></tr><tr><td><strong>Etichetta del valore</strong></td><td>L'etichetta che verrà mostrata accanto al valore, spesso come percentuale o frazione.</td><td>Usala per fornire una rappresentazione testuale del valore di avanzamento, offrendo chiarezza agli utenti.</td></tr><tr><td><strong>Posizione del valore</strong></td><td>Posizione dell'etichetta del valore rispetto alla barra di avanzamento. Le opzioni includono <code>In alto a destra</code>, <code>Sinistra</code>, <code>Destra</code>, <code>In alto a sinistra</code>, <code>In basso a destra</code>, e <code>In basso a sinistra</code>.</td><td>Scegli una posizione del valore che migliori la leggibilità e si adatti al design del contenuto circostante.</td></tr><tr><td><strong>Dimensione</strong></td><td>Lo spessore della barra di avanzamento. Le opzioni includono <code>Completo</code>, <code>Molto piccolo</code>, <code>Piccola</code>, <code>Media</code>, e <code>Grande</code>.</td><td>Seleziona una dimensione che garantisca che la barra di avanzamento sia ben visibile e armoniosa con il layout complessivo del design.</td></tr><tr><td><strong>Orientamento</strong></td><td>La direzione in cui la barra di avanzamento si riempie. Può essere impostata su <code>Orizzontale</code> oppure <code>Verticale</code>.</td><td>Allinea l'orientamento con il layout e la direzione del flusso dei contenuti per una visualizzazione intuitiva dell'avanzamento.</td></tr><tr><td><strong>Mostra valore</strong></td><td>Un interruttore per mostrare o nascondere l'etichetta del valore di avanzamento.</td><td>Usa questa impostazione per presentare direttamente sulla barra l'avanzamento numerico come riferimento per l'utente oppure per mantenere il design pulito e minimalista.</td></tr><tr><td><strong>Variante</strong></td><td>La forma della barra di avanzamento. Le opzioni sono <code>Base</code> per una barra diritta o <code>Circolare</code> per un indicatore di avanzamento rotondo.</td><td>Scegli una variante che si adatti meglio al tema di design del sito e al tipo di avanzamento visualizzato.</td></tr><tr><td><strong>Testurizzato</strong></td><td>Aggiunge un effetto testurizzato alla barra di avanzamento per un dettaglio visivo aggiuntivo.</td><td>Applica questa proprietà per creare un aspetto più dinamico e tattile per la barra di avanzamento.</td></tr><tr><td><strong>Tema</strong></td><td>Temi di colore predefiniti che indicano la natura o lo stato dell'avanzamento. I temi disponibili includono <code>Base</code>, <code>Alt inverso</code>, <code>Errore</code>, <code>Info</code>, <code>Inverso</code>, <code>Offline</code>, <code>Successo</code>, e <code>Avviso</code>.</td><td>Seleziona un tema per comunicare significati diversi—ad esempio, usa <code>Successo</code> per le attività completate o <code>Avviso</code> per le azioni in sospeso.</td></tr><tr><td><strong>Spessore</strong></td><td>Regola lo spessore della barra di avanzamento. Le opzioni includono <code>Media</code>, <code>Molto piccolo</code>, <code>Piccola</code>, e <code>Grande</code>.</td><td>Scegli lo spessore che garantisca la prominenza della barra di avanzamento e la compatibilità estetica con gli altri elementi del sito.</td></tr></tbody></table>
{% endtab %}

{% tab title="🎨 Stile" %}

{% 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-it/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.