# AX - Barra di avanzamento

## Panoramica

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

Usalo per mostrare agli utenti del portale il loro progresso verso gli obiettivi, lo stato di completamento di processi multi-step, la percentuale dei requisiti soddisfatti o qualsiasi metrica numerica di avanzamento derivante dai dati di 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, il progresso della formazione o ovunque gli utenti del portale necessitino di un feedback visivo sul loro avanzamento verso un traguardo.

## 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 chiara comprensione di quale progresso la barra stia indicando.</td></tr><tr><td><h4>Valore</h4></td><td>Un valore numerico che rappresenta l'avanzamento corrente.</td><td>Imposta questa proprietà per riflettere la percentuale o la frazione del compito o del processo che è stata completata.</td></tr><tr><td><strong>Etichetta del valore</strong></td><td>L'etichetta che sarà mostrata accanto al valore, spesso come percentuale o frazione.</td><td>Usalo 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>Pieno</code>, <code>X-Piccolo</code>, <code>Piccolo</code>, <code>Medio</code>, e <code>Grande</code>.</td><td>Seleziona una dimensione che assicuri che la barra di avanzamento sia evidente 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> o <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 il progresso numerico direttamente sulla barra come riferimento per l'utente o 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 lineare o <code>Circolare</code> per un indicatore di avanzamento tondo.</td><td>Scegli una variante che si adatti meglio al motivo 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 trasmettere significati diversi—per esempio, usa <code>Successo</code> per attività completate o <code>Avviso</code> per azioni in sospeso.</td></tr><tr><td><strong>Spessore</strong></td><td>Regola lo spessore della barra di avanzamento. Le opzioni includono <code>Medio</code>, <code>X-Piccolo</code>, <code>Piccolo</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 %}