Donut Chart Fill

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.

Diagrammelemente gehen fließend von alten zu neuen Werten über, wenn sich Daten ändern oder Datensätze umgeschaltet werden.

Füge bei [wo] eine „Chart Data Transition“ hinzu (auch chart update animation genannt).
Wenn sich die Daten ändern, sollen alle Balken gleichzeitig von ihrem alten zu ihrem neuen Wert gleiten, weich und ohne Eile, statt von null neu gezeichnet zu werden.
Starte jedes Update bei den aktuell angezeigten Werten, damit eine schnelle zweite Änderung nicht springt, und setze bei reduzierter Bewegung (prefers-reduced-motion) neue Werte sofort.

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

Eine Zahl zählt von einem Start- zu einem Zielwert hoch, sobald sie sichtbar wird.

Füge bei [wo] einen „Number Ticker“ hinzu (auch count up oder animated counter genannt).
Sobald die Zahl ins Bild kommt, soll sie von null bis zu ihrem Zielwert hochzählen, anfangs schnell und zum Ende hin sanft abbremsend.
Nutze Ziffern mit fester Breite, damit drumherum nichts zittert, zähle nur einmal und zeige Screenreadern sowie bei reduzierter Bewegung (prefers-reduced-motion) sofort den Endwert.

Bei jeder Zahlenänderung rollt jede Ziffer vertikal zum neuen Wert.

Füge bei [wo] eine „Odometer“-Zahlenanimation hinzu (auch rolling numbers oder slot-machine digits genannt).
Ändert sich der Wert, soll jede Ziffer vertikal zu ihrer neuen Ziffer rollen, immer vorwärts, mit leichter Staffelung zwischen den Ziffern und einem kleinen Einrasten am Ende.
Halte alle Ziffern gleich breit, damit sich die Zahl nicht verschiebt, und gib Screenreadern nur den Endwert aus.

Linien und Punkte bewegen sich animiert zwischen Orten auf einer Karte oder einem Globus.

Füge bei [wo] „Animated Map Arcs“ hinzu (auch globe arcs genannt).
Gekrümmte Linien sollen sich nacheinander zwischen Orten auf einer Punktekarte selbst zeichnen und sich dann zu ihrem Ziel zurückziehen, während dort ein weicher Ring pulsiert: ruhig und gleichmäßig.
Versetze die Bögen zeitlich, damit sie sich nie im Gleichtakt bewegen, halte die Schleife nahtlos und pausiere sie bei reduzierter Bewegung (prefers-reduced-motion).