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

# AX - Fortschrittsbalken

## Übersicht

**AX - Fortschrittsbalken** ist eine Experience-Cloud-Komponente, die eine visuelle Fortschrittsanzeige darstellt und den Abschlussgrad bzw. das Erreichen eines Ziels auf Experience-Sites-Seiten anzeigt.

Verwenden Sie sie, um Portalbenutzern ihren Fortschritt in Richtung von Zielen, den Abschlussstatus mehrstufiger Prozesse, den prozentualen Erfüllungsgrad von Anforderungen oder jede numerische Fortschrittskennzahl aus Salesforce-Daten anzuzeigen. Konfigurieren Sie den Fortschrittswert, Beschriftungen, Farben und das Styling im Experience Builder.

Ideal für den Abschluss des Onboardings, die Zielverfolgung, die Vollständigkeit des Profils, den Trainingsfortschritt oder überall dort, wo Portalbenutzer visuelles Feedback zu ihrem Fortschritt in Richtung eines Ziels 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, der den Zweck des Fortschrittsbalkens kennzeichnet.</td><td>Implementieren Sie diese Eigenschaft, um Benutzern ein klares Verständnis dafür zu vermitteln, welchen Fortschritt der Balken anzeigt.</td></tr><tr><td><h4>Wert</h4></td><td>Ein numerischer Wert, der den aktuellen Fortschritt darstellt.</td><td>Setzen Sie diese Eigenschaft so, dass sie den Prozentsatz oder Bruchteil der Aufgabe bzw. des Prozesses widerspiegelt, der abgeschlossen wurde.</td></tr><tr><td><strong>Wertbeschriftung</strong></td><td>Die Beschriftung, die neben dem Wert angezeigt wird, oft als Prozentsatz oder Bruchteil.</td><td>Verwenden Sie dies, um eine textliche Darstellung des Fortschrittswerts bereitzustellen und den Benutzern Klarheit zu verschaffen.</td></tr><tr><td><strong>Wertposition</strong></td><td>Position der Wertbeschriftung relativ zum Fortschrittsbalken. Zu den Optionen gehören <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. Zu den Optionen gehören <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ällt und harmonisch in das gesamte Layoutdesign passt.</td></tr><tr><td><strong>Ausrichtung</strong></td><td>Die Richtung, in der sich der Fortschrittsbalken füllt. Kann festgelegt werden auf <code>Horizontal</code> oder <code>Vertikal</code>.</td><td>Richten Sie die Ausrichtung an Layout und Leserichtung des Inhaltsflusses aus, um den Fortschritt intuitiv zu visualisieren.</td></tr><tr><td><strong>Wert anzeigen</strong></td><td>Ein Umschalter zum Anzeigen oder Ausblenden der Fortschrittswertbeschriftung.</td><td>Verwenden Sie diese Einstellung, um den numerischen Fortschritt direkt auf dem Balken anzuzeigen oder das Design sauber und minimalistisch zu halten.</td></tr><tr><td><strong>Variante</strong></td><td>Die Form des Fortschrittsbalkens. Die Optionen sind <code>Basis</code> für einen geraden Balken oder <code>Kreisförmig</code> für eine runde Fortschrittsanzeige.</td><td>Wählen Sie eine Variante, die am besten zum Designmuster der Website und zur Art des angezeigten Fortschritts passt.</td></tr><tr><td><strong>Texturiert</strong></td><td>Fügt dem Fortschrittsbalken einen texturierten Effekt für zusätzliche visuelle Details hinzu.</td><td>Verwenden Sie diese Eigenschaft, um dem Fortschrittsbalken ein dynamischeres und haptischeres 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 sind <code>Basis</code>, <code>Alt Inverse</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 – verwenden Sie zum Beispiel <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. Zu den Optionen gehören <code>Mittel</code>, <code>Extra klein</code>, <code>Klein</code>, und <code>Groß</code>.</td><td>Wählen Sie die Dicke, die sicherstellt, dass der Fortschrittsbalken auffällig ist und ästhetisch mit anderen Seitenelementen harmoniert.</td></tr></tbody></table>
{% endtab %}

{% tab title="🎨 Gestaltung" %}

{% 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:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/experience-components/ax-progress-bar.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.