Circular Spinner

Das Element dreht sich fortlaufend mit gleichbleibender Geschwindigkeit.

Füge bei [wo] einen „Spin“-Effekt hinzu (auch spinner oder rotate loop genannt).
Das Element soll sich fortlaufend mit konstanter, gleichmäßiger Geschwindigkeit drehen, ohne Easing zwischen den Umdrehungen.
Mach die Schleife nahtlos, gib dem Spinner ein barrierefreies Lade-Label und verlangsame oder stoppe ihn bei reduzierter Bewegung (prefers-reduced-motion).

Ein Bogen wächst um einen Ring, um den erreichten Prozentsatz zu zeigen.

Füge bei [wo] einen „Progress Ring“ hinzu (auch circular progress oder radial progress genannt).
Oben beginnend soll ein Bogen im Uhrzeigersinn um den Ring wachsen, um den erreichten Prozentsatz zu zeigen, und beim Ankommen sanft abbremsen, während die Zahl in der Mitte mit hochzählt.
Halte Bogen und Zahl synchron und stelle den Wert mit passender Fortschrittsbalken-Semantik für Screenreader bereit.

Ein Button ersetzt seine Beschriftung durch einen kleinen Spinner oder ergänzt ihn, solange eine Aktion läuft.

Füge bei [wo] einen „Button Loading State“ hinzu (auch spinner button oder loading button genannt).
Beim Drücken soll der Button leicht einsinken, seine Beschriftung ausblenden und an ihrer Stelle einen kleinen Spinner zeigen, solange die Aktion läuft; danach kommt die Beschriftung zurück.
Halte die Breite des Buttons beim Laden fest, blockiere wiederholtes Drücken und melde den Busy-Zustand an Screenreader.

Zieht man eine Liste nach unten, erscheint ein Ladekreisel, und beim Loslassen wird der Inhalt neu geladen.

Füge bei [wo] eine „Pull to Refresh“-Interaktion hinzu (auch swipe to refresh genannt).
Wird die Liste oben nach unten gezogen, soll sie dem Finger mit etwas Widerstand folgen und einen Ladekreisel zeigen, der sich beim Ziehen dreht; nach dem Loslassen dreht er sich weiter, während der Inhalt neu lädt, dann gleitet die Liste sanft wieder nach oben.
Starte es nur, wenn die Liste schon ganz oben ist, und biete Tastatur- und Screenreader-Nutzern zusätzlich einen normalen Aktualisieren-Button.

Ein Balken füllt sich von links nach rechts im Verhältnis zum Fortschritt der Aufgabe.

Füge bei [wo] einen Fortschrittsbalken (Determinate Progress Bar) hinzu, auch progress bar fill oder progress indicator genannt.
Der Balken soll sich im Takt des echten Fortschritts von links nach rechts füllen, zwischen den Updates weich übergehen und daneben den Prozentwert zeigen.
Nutze die passende Fortschrittsbalken-Semantik mit aktuellem, minimalem und maximalem Wert, damit Screenreader ihn vorlesen können, und lass die Füllung nie zurücklaufen.

Ein Balkensegment gleitet immer wieder über die Spur, wenn die Dauer unbekannt ist.

Füge bei [wo] einen „Indeterminate Linear Progress“-Balken hinzu (auch indeterminate progress bar genannt).
Ein kurzes Segment soll immer wieder von einem Ende der Spur zum anderen gleiten, schnell und weich, solange die Dauer der Aufgabe unbekannt ist.
Lass das Segment vollständig in die Spur hinein- und wieder herauslaufen, damit die Schleife keine sichtbare Naht hat, und kennzeichne ihn für Screenreader als beschäftigten Fortschrittsbalken.

Eine Liste von Schritten wird nacheinander hervorgehoben oder abgehakt, während eine lange Aufgabe fortschreitet.

Füge bei [wo] einen „Multi-Step Loader“ hinzu (auch step loader oder checklist loader genannt).
Die Schritte sollen nacheinander von oben nach unten aufleuchten, und jeder soll beim Abschluss ein kleines Häkchen bekommen, das kurz aufploppt, in ruhigem, gut lesbarem Tempo.
Schalte die Schritte nach dem echten Fortschritt der Aufgabe weiter statt nach einem festen Timer, und melde jeden abgeschlossenen Schritt an Screenreader.