CP Registry

Progress

Lineare Fortschrittsanzeige mit nativen A11y-Attributen. Bestimmt (Wert) oder unbestimmt (Prüfung läuft). Vier Tones, drei Größen, optional mit Label und Prozentwert.

Förderantrag-Fortschritt

Standardfall: Bestimmter Wert mit Label und Prozent rechts.

Schritt 3 von 5 (60 %)

Mit Label-Text, Prozentanzeige rechts.

Förderantrag — Schritt 3 von 5 
<Progress value={60} label="Förderantrag — Schritt 3 von 5" showValue />

Mehrere Anträge auf einer Übersicht

Beratung
Antragstellung
Bewilligung
Auszahlung 
<Progress value={100} label="Beratung" tone="success" showValue />
<Progress value={80}  label="Antragstellung" tone="primary" showValue />
<Progress value={20}  label="Bewilligung" tone="warning" showValue />
<Progress value={0}   label="Auszahlung" showValue />

Indeterminate — Prüfung läuft

Ohne festen Endwert. Animation respektiert prefers-reduced-motion.

Prüfung der KfW-Förderung

Prüfung der KfW-Förderung 
<Progress indeterminate label="Prüfung der KfW-Förderung" showValue />

Tones

Vier farbliche Kontexte für unterschiedliche Bedeutung.

Alle Tones nebeneinander

Standard
Erfolgreich abgeschlossen
Achtung — Frist nähert sich
Fehlerhaft 
<Progress value={75} tone="primary" label="Standard" showValue />
<Progress value={75} tone="success" label="Erfolgreich abgeschlossen" showValue />
<Progress value={75} tone="warning" label="Achtung — Frist nähert sich" showValue />
<Progress value={75} tone="error"   label="Fehlerhaft" showValue />

Größen

sm / md / lg

Klein
Standard
Gross 
<Progress value={50} size="sm" label="Klein" />
<Progress value={50} size="md" label="Standard" />
<Progress value={50} size="lg" label="Gross" />

Redakteurshinweise

Wann einsetzen

  • Mehrstufige Anträge — visualisiert Etappenfortschritt
  • Lange Vorgänge im Backoffice (Prüfung, Auszahlung)
  • Indeterminate für Operationen ohne klares Ende
  • Uploads, Datenimporte, Synchronisationen

Inhalts-Empfehlungen

  • Label immer setzen — was wird gemessen?
  • showValue: nur wenn der Prozentwert relevant ist
  • Tone success erst bei 100 %, warning bei naher Frist
  • Indeterminate: kombinieren mit Toast bei Abschluss

Mobile & A11y

  • role="progressbar" mit aria-valuenow / -valuemin / -valuemax
  • Indeterminate: aria-valuetext="Vorgang läuft"
  • prefers-reduced-motion: Indeterminate-Animation pausiert
  • Mindesthoehe 8px (md) — kleiner nur bei Detail-Listen

Pitfalls

  • Kein Progress für "ungewisse" Vorgänge mit festem Wert — dann indeterminate
  • Nicht zwei nebeneinander mit unterschiedlichem Tone für dasselbe Ziel
  • Kein Auto-Reset auf 0 — verwirrt Screen-Reader
  • Kein "Loading-Flash" unter 1s — direkt zeigen ohne Skeleton

Installation

cp-components add progress