Progress Indicator
Fortschrittsanzeige
Ein Fortschrittsanzeiger zeigt, dass noch gearbeitet wird. Ein Balken oder Ring zeigt einen bekannten Fortschritt. Ein Spinner bedeutet, dass die Wartezeit unbekannt ist.
Ein echtes Beispiel
Ein 400 MB Upload zeigt 62 % und die restliche Zeit. Eine schnelle Abfrage mit unbekannter Dauer nutzt einen kleinen Spinner.
Hauptteile
- 01State signal
- 02Human-readable message
- 03Timing or progress
- 04Recovery path
Verwenden Sie es, wenn
Verwenden Sie eine Leiste mit einem Endpunkt, wann immer die Arbeit messbar ist.
Nutze es nicht, wenn
Zeige niemals einen endlosen Spinner ohne Erklärung, ohne Möglichkeit zum Abbrechen und ohne Fehlerzustand.
In Code verwendeter Name
<progress> / aria-busy Vor dem Ausliefern
Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states.
Outcome: Complete the task with Fortschrittsanzeige (Progress Indicator). User context: Ein 400 MB Upload zeigt 62 % und die restliche Zeit. Eine schnelle Abfrage mit unbekannter Dauer nutzt einen kleinen Spinner. Recommended pattern: Fortschrittsanzeige (Progress Indicator). Why it fits: Verwenden Sie eine Leiste mit einem Endpunkt, wann immer die Arbeit messbar ist. Do not use it when: Zeige niemals einen endlosen Spinner ohne Erklärung, ohne Möglichkeit zum Abbrechen und ohne Fehlerzustand. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): Kein einziger offizieller Standard kontrolliert den gesamten Begriff. Seine Bedeutung kann sich zwischen Teams, Plattformen oder Frameworks ändern. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Diese Anfrage prüfen
Review how Fortschrittsanzeige (Progress Indicator) is used now. Definition: Ein Fortschrittsanzeiger zeigt, dass noch gearbeitet wird. Ein Balken oder Ring zeigt einen bekannten Fortschritt. Ein Spinner bedeutet, dass die Wartezeit unbekannt ist. Release checks: Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.