Progress Bar – Fortschrittsanzeige im UI-Design

Eine Progress Bar (Fortschrittsbalken) ist eine UI-Komponente, die den aktuellen Fortschritt eines Prozesses visuell auf einer linearen Skala von 0 % bis 100 % darstellt.

Rubrik: Mediendesign & Digitale Medien · Unterrubrik: UI-Komponenten · Niveau: Einsteiger Synonyme / Auch bekannt als: Fortschrittsbalken, Ladebalken, Progress Indicator, Loading Bar, Completion Bar

Was ist eine Progress Bar?

Progress Bars gehören zur Kategorie der Feedback-Komponenten – sie kommunizieren dem Nutzer, dass ein Prozess läuft, und geben ihm eine Einschätzung über Dauer und Fortschritt. Gut implementierte Progress Bars reduzieren Abbruchraten, da Nutzer bei bekannter Wartezeit geduldiger sind als bei unbekannter Dauer. Sie erscheinen bei Datei-Uploads, Installations-Prozessen, mehrstufigen Formularen und Lade-Vorgängen.

Erklärung

Varianten nach Messpräzision

Determinate Progress Bar (bestimmte Dauer bekannt): Der Fortschritt ist messbar und wird als prozentualer Füllstand dargestellt. Der Balken wächst von links nach rechts. Prozentsatz oder Statustext werden oft zusätzlich angezeigt. Anwendungsfall: Datei-Upload, Installation, mehrstufiger Wizard.

Indeterminate Progress Bar (Dauer unbekannt): Ein animierter Balken ohne definierten Endpunkt – zeigt, dass etwas passiert, aber nicht wie viel bereits erledigt ist. Typisch als pulsierender Balken oder als laufender Lichtkegel von links nach rechts. Anwendungsfall: API-Anfragen, Seiten-Ladeprozesse, Background-Tasks.

Stepped Progress Bar / Step Indicator: Zeigt den Fortschritt in diskreten Schritten, nicht prozentual. Typisch in mehrstufigen Formularen oder Onboarding-Flows mit benannten Schritten (z. B. „1. Konto erstellen → 2. Profil → 3. Bestätigung").

Circular Progress Indicator: Ringförmige Variante statt linearem Balken. Kompakter, gut für Profilfotos (Ladefortschritt) oder im Avatar-Kontext.

Buffered Progress Bar: Zeigt zwei Füllstände – bereits abgespielt (dunkel) und bereits gepuffert (hell). Klassisch bei Video-Playern (YouTube, Netflix).

Anatomie

• Track: Hintergrundbalken, meist grau oder transparent
• Indicator/Fill: Farbiger Füllbalken, wächst von links nach rechts
• Label: Optionaler Prozentwert oder Statustext über/neben dem Balken
• Step Labels: Bei Stepped Variant die Schrittnamen

Accessibility (WCAG 2.1)

• role="progressbar" auf dem Container-Element
• aria-valuenow="60" (aktueller Wert), aria-valuemin="0", aria-valuemax="100"
• aria-valuetext="60 Prozent hochgeladen" für sprechende Screenreader-Ausgabe
• Bei Indeterminate: aria-valuenow weglassen (Wert unbekannt), aria-label beschreibt den Prozess
• Fortschrittsänderungen an Screenreader kommunizieren: aria-live="polite" auf ein Status-Element
• Farbe allein reicht nicht – Fortschritt muss auch ohne Farberkennung klar sein (z. B. durch Prozentzahl)
• Kontrast des Füllbalkens gegenüber Track: mindestens 3:1 (WCAG 1.4.11)

Beispiele

1. GitHub – Verifikations-Flow: Beim Einrichten der Zwei-Faktor-Authentifizierung zeigt GitHub einen dreistufigen Stepped Progress Indicator oben im Wizard – Nutzer sehen immer, auf welchem Schritt sie sind und wie viele noch folgen.
2. YouTube – Video-Playback: Buffered Progress Bar mit drei Zuständen: abgespielt (rot), gepuffert (dunkelgrau), ungepuffert (hellgrau). Beim Hover verbreitert sich der Balken und ein Zeitstempel-Tooltip erscheint – elegantes Micro-Interaction-Design.
3. Mobile vs. Desktop: iOS zeigt bei langen Prozessen (Systemupdates) eine zentral platzierte, große Circular Progress Bar mit Prozentangabe. Desktop-Anwendungen (z. B. Finder beim Kopieren) nutzen lineare Balken mit geschätzter Restzeit.
4. Accessibility Best Practice: Moodle (E-Learning-Plattform) implementiert Kursfortschritts-Balken mit role="progressbar", aria-valuenow und einem Screenreader-zugänglichen Text „Kurs zu 75 % abgeschlossen" – vollständig konform mit WCAG 2.1.
5. Häufiger Fehler: Indeterminate Progress Bar verwenden, wenn der Prozentsatz bekannt ist, nur weil die Determinate-Variante mehr Implementierungsaufwand bedeutet. Nutzer sind bei bekanntem Fortschritt deutlich geduldiger. Studie der NNG zeigt: unbekannte Wartezeiten werden 2× so lang wahrgenommen.

In der Praxis

Figma: Progress Bar als Komponente mit Number-Variable für den Füllstand (0–100). Track als Rectangle, Indicator als darüberliegender farbiger Layer mit variablen Breite via Component Variable. Stepped Variant als eigene Komponente mit Status-Variants pro Schritt (Active, Completed, Inactive).

HTML/CSS-Grundstruktur: ```html <!-- Native Progress (einfach) --> <label for="upload-progress">Datei-Upload</label> <progress id="upload-progress" max="100" value="65">65%</progress> <span>65 % hochgeladen</span>

<!-- Custom ARIA Progress Bar --> <div role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" aria-valuetext="65 Prozent hochgeladen" aria-label="Upload-Fortschritt" > <div class="progress-track"> <div class="progress-fill" style="width: 65%"></div> </div> </div>

<!-- Indeterminate --> <div role="progressbar" aria-label="Daten werden geladen" class="progress-indeterminate" ></div> ```

Vergleich & Abgrenzung

Progress Bars zeigen, wie weit ein Prozess ist. Skeleton Loader und Spinner zeigen nur, dass etwas lädt. Für Ladeprozesse unter ~2 Sekunden ist ein Spinner angemessener; für längere Prozesse eine Progress Bar.

Häufige Fragen (FAQ)

Wann verwende ich eine Progress Bar und wann einen Spinner? Die Faustregel der NNG: Unter 2 Sekunden → kein Feedback nötig. 2–10 Sekunden → Spinner oder Indeterminate Progress Bar. Über 10 Sekunden → Determinate Progress Bar mit Prozentzahl und/oder geschätzter Restzeit. Lange Prozesse (z. B. Datei-Upload) immer mit Fortschrittsanzeige versehen, damit Nutzer nicht vorzeitig abbrechen.

Soll ich einen Prozentwert oder eine Zeitschätzung anzeigen? Beide sind hilfreich, aber unterschiedlich. Prozentwert ist präziser und wird bevorzugt. Zeitschätzungen („noch ca. 3 Minuten") sind gefährlich, da sie oft ungenau sind und bei Überschreitung Frustration erzeugen. Wenn Zeitschätzungen angezeigt werden, immer als ungefähre Angabe kennzeichnen.

Verwandte Einträge

• Skeleton Loader
• Slider & Range
• Toast Notification
• Feedback-Design

Weiterführend

• Nielsen Norman Group – „Progress Indicators": nngroup.com/articles/progress-indicators
• Material Design 3 – Progress Indicators: m3.material.io/components/progress-indicators
• Apple Human Interface Guidelines – Progress Indicators: developer.apple.com/design/human-interface-guidelines/progress-indicators
• WCAG 2.1 – ARIA Progressbar Role: w3.org/TR/wai-aria/#progressbar