# AX - Fortschrittsbalken

## Überblick

**AX - Fortschrittsbalken** ist eine Experience Cloud-Komponente, die einen visuellen Fortschrittsindikator anzeigt und den Prozentsatz der Fertigstellung oder das Erreichen eines Ziels auf Experience Sites-Seiten darstellt.

Verwenden Sie sie, um Portalbenutzern ihren Fortschritt zu Zielen, den Abschlussstatus von mehrstufigen Prozessen, den Prozentsatz erfüllter Anforderungen oder jede numerische Fortschrittsmetrik aus Salesforce-Daten anzuzeigen. Konfigurieren Sie den Fortschrittswert, Beschriftungen, Farben und das Styling im Experience Builder.

Perfekt für Abschluss von Onboarding, Zielverfolgung, Profilvollständigkeit, Trainingsfortschritt oder überall dort, wo Portalbenutzer visuelles Feedback zu ihrem Fortschritt gegenüber einem Ziel benötigen.

## Einstellungen

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

<table><thead><tr><th>Name</th><th width="202">Beschreibung</th><th>Verwendung</th></tr></thead><tbody><tr><td><strong>Beschriftung</strong></td><td>Der angezeigte Text zur Identifizierung des Zwecks des Fortschrittsbalkens.</td><td>Implementieren Sie diese Eigenschaft, um den Benutzern ein klares Verständnis dafür zu geben, welchen Fortschritt der Balken anzeigt.</td></tr><tr><td><h4>Wert</h4></td><td>Ein numerischer Wert, der den aktuellen Fortschritt darstellt.</td><td>Legen Sie diese Eigenschaft fest, um den Prozentsatz oder Bruchteil der Aufgabe oder des Prozesses widerzuspiegeln, der abgeschlossen wurde.</td></tr><tr><td><strong>Wertbeschriftung</strong></td><td>Die Beschriftung, die neben dem Wert angezeigt wird, oft als Prozentsatz oder Bruch.</td><td>Verwenden Sie dies, um eine textliche Darstellung des Fortschrittswerts zu geben und den Benutzern Klarheit zu verschaffen.</td></tr><tr><td><strong>Wertposition</strong></td><td>Position der Wertbeschriftung in Bezug auf den Fortschrittsbalken. Optionen umfassen <code>Oben rechts</code>, <code>Links</code>, <code>Rechts</code>, <code>Oben links</code>, <code>Unten rechts</code>, und <code>Unten links</code>.</td><td>Wählen Sie eine Wertposition, die die Lesbarkeit verbessert und zum Design des umgebenden Inhalts passt.</td></tr><tr><td><strong>Größe</strong></td><td>Die Dicke des Fortschrittsbalkens. Optionen umfassen <code>Voll</code>, <code>Extra klein</code>, <code>Klein</code>, <code>Mittel</code>, und <code>Groß</code>.</td><td>Wählen Sie eine Größe, die sicherstellt, dass der Fortschrittsbalken auffällig und harmonisch mit dem Gesamtlayout des Designs ist.</td></tr><tr><td><strong>Ausrichtung</strong></td><td>Die Richtung, in der sich der Fortschrittsbalken füllt. Kann eingestellt werden auf <code>Horizontal</code> oder <code>Vertikal</code>.</td><td>Richten Sie die Orientierung an dem Layout und der Flussrichtung des Inhalts aus, um eine intuitive Fortschrittsvisualisierung zu gewährleisten.</td></tr><tr><td><strong>Wert anzeigen</strong></td><td>Ein Schalter, um die Anzeige der Wertbeschriftung ein- oder auszublenden.</td><td>Verwenden Sie diese Einstellung, um entweder den numerischen Fortschritt direkt auf dem Balken zur Referenz für den Benutzer anzuzeigen oder das Design sauber und minimalistisch zu halten.</td></tr><tr><td><strong>Variante</strong></td><td>Die Form des Fortschrittsbalkens. Optionen sind <code>Basis</code> für einen geraden Balken oder <code>Zirkulär</code> für einen runden Fortschrittsanzeiger.</td><td>Wählen Sie eine Variante, die am besten zum Designmotiv der Site und zur Art des angezeigten Fortschritts passt.</td></tr><tr><td><strong>Strukturiert</strong></td><td>Fügt dem Fortschrittsbalken einen strukturierten Effekt für zusätzliche visuelle Details hinzu.</td><td>Wenden Sie diese Eigenschaft an, um dem Fortschrittsbalken ein dynamischeres und taktileres Erscheinungsbild zu verleihen.</td></tr><tr><td><strong>Thema</strong></td><td>Vordefinierte Farbthemen, die die Art oder den Status des Fortschritts anzeigen. Verfügbare Themen umfassen <code>Basis</code>, <code>Alt Invers</code>, <code>Fehler</code>, <code>Info</code>, <code>Invertiert</code>, <code>Offline</code>, <code>Erfolg</code>, und <code>Warnung</code>.</td><td>Wählen Sie ein Thema, um unterschiedliche Bedeutungen zu vermitteln—for Beispiel verwenden Sie <code>Erfolg</code> für abgeschlossene Aufgaben oder <code>Warnung</code> für ausstehende Aktionen.</td></tr><tr><td><strong>Dicke</strong></td><td>Passen Sie die Dicke des Fortschrittsbalkens an. Optionen umfassen <code>Mittel</code>, <code>Extra klein</code>, <code>Klein</code>, und <code>Groß</code>.</td><td>Wählen Sie die Dicke, die die Auffälligkeit des Fortschrittsbalkens sicherstellt und ästhetisch mit anderen Seitenelementen kompatibel ist.</td></tr></tbody></table>
{% endtab %}

{% tab title="🎨 Styling" %}

{% endtab %}
{% endtabs %}