Loading & Progress

Senkrechte Balken wachsen und schrumpfen phasenversetzt, wie ein Audio-Equalizer.

Füge bei [wo] eine „Bar Loader (Equalizer)“-Ladeanimation hinzu (auch Bars Loader oder Audio Bars genannt).
Ein paar senkrechte Balken sollen sich phasenversetzt strecken und stauchen wie ein Audio-Equalizer, in lebhaftem, aber gleichmäßigem Tempo.
Halte die Schleife nahtlos, gib ihr ein Status-Label für Screenreader und stoppe die Bewegung bei reduzierter Bewegung (prefers-reduced-motion).

Eine winzige, unscharfe Version des Bildes hält den Platz und wird scharf, sobald das volle Bild geladen ist.

Füge bei [wo] einen „Blur-Up Placeholder“-Bildladeeffekt hinzu (auch LQIP oder Blur Placeholder genannt).
Eine winzige, stark unscharfe Version des Bildes soll sofort den Platz des Bildes füllen, und sobald das volle Bild geladen ist, soll es sanft und recht schnell scharf werden.
Reserviere die exakte Bildgröße, damit sich beim Laden nichts verschiebt, und beschneide die unscharfen Ränder, damit sie nicht über den Rahmen hinausragen.

Eine Reihe von Punkten hüpft, blendet oder skaliert nacheinander.

Füge bei [wo] „Bouncing Dots“ hinzu (auch dots loader oder three-dot loader genannt).
Die Punkte sollen nacheinander hochhüpfen und landen, in einem leichten, federnden Rhythmus, mit einer kurzen Pause, bevor die Abfolge von vorn beginnt.
Halte die Schleife nahtlos, gib ihr ein Status-Label für Screenreader und stoppe die Bewegung bei reduzierter Bewegung (prefers-reduced-motion).

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.

Ein Ring oder Bogen dreht sich fortlaufend, um anzuzeigen, dass etwas lädt.

Füge bei [wo] einen „Circular Spinner“ hinzu (auch spinner oder throbber genannt).
Ein Bogen soll gleichmäßig um einen blassen Ring rotieren und sich dabei verlängern und verkürzen, weich und fließend.
Halte die Rotation nahtlos, gib ihm ein Lade-Label für Screenreader und verlangsame oder stoppe ihn bei reduzierter Bewegung (prefers-reduced-motion).

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.

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.

Graue Platzhalterblöcke blenden sanft ein und aus, um das Laden anzuzeigen.

Füge bei [wo] einen „Pulse Placeholder“ hinzu (auch skeleton pulse genannt).
Graue Platzhalterblöcke in der Form des kommenden Inhalts sollen langsam und gemeinsam heller werden und zurückblenden, in einem sanften, gleichmäßigen Rhythmus.
Passe die Platzhalter an das echte Layout an, damit nichts springt, wenn der Inhalt kommt, und lass sie bei reduzierter Bewegung (prefers-reduced-motion) stillstehen.

Über graue Platzhalterformen gleitet ein heller Lichtschimmer.

Füge bei [wo] einen „Skeleton Shimmer“ hinzu (auch skeleton wave oder shimmer effect genannt).
Ein weiches Lichtband soll von links nach rechts über die grauen Platzhalterformen gleiten und vor dem nächsten Durchlauf kurz pausieren: fließend und ohne Eile.
Passe die Platzhalterformen an das echte Layout an, damit nichts springt, wenn der Inhalt lädt, und zeige bei reduzierter Bewegung (prefers-reduced-motion) statische Platzhalter.

Ein dünner Balken am oberen Seitenrand kriecht während der Navigation voran und schließt ab, sobald die Seite geladen ist.

Füge bei [wo] einen Ladebalken (Top Loading Bar) hinzu, auch page progress bar genannt.
Ein dünner Balken am oberen Rand soll zuerst schnell vorschießen und dann immer langsamer kriechen, solange die Seite lädt; wenn das Laden fertig ist, soll er ans Ende sausen und ausblenden.
Lass ihn nie das Ende erreichen, bevor das Laden wirklich abgeschlossen ist, und sorge dafür, dass er den Seiteninhalt weder verdeckt noch verschiebt.

Drei Punkte in einer Sprechblase pulsieren oder heben sich nacheinander, um zu zeigen, dass jemand oder eine KI schreibt.

Füge bei [wo] einen „Typing Indicator“ hinzu (auch typing dots genannt).
Punkte in einer kleinen Chat-Blase sollen nacheinander aufsteigen und heller werden, in einem weichen, sanften Rhythmus, solange die Gegenseite schreibt.
Halte die Schleife nahtlos, entferne die Blase, sobald die Nachricht ankommt, und gib Screenreadern statt der Punkte einen kurzen Statustext.