Top Loading Bar (Ladebalken)

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 Balken oder Ring füllt sich, während man durch die Seite oder den Artikel scrollt.

Füge bei [wo] einen „Scroll Progress Indicator“ hinzu (auch reading progress bar genannt).
Ein dünner Balken am oberen Rand soll sich von links nach rechts füllen, passend dazu, wie weit gescrollt wurde, und am Ende die volle Breite erreichen.
Kopple ihn direkt an die Scrollposition, ohne nachziehende Glättung, und lass ihn keinen Inhalt verdecken.

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.

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.

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.