Bouncing Dots

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).

Die Buchstaben wippen nacheinander auf und ab, sodass eine Welle durch das Wort läuft.

Füge bei [wo] einen „Wavy Text“-Effekt hinzu (auch text wave genannt).
Die Buchstaben sollen nacheinander auf und ab wippen, sodass ständig eine sanfte, weiche Welle durch das Wort läuft.
Lass die Schleife nahtlos laufen, sorge dafür, dass Screenreader es als ein Wort lesen, und stoppe die Welle 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.