Bar Chart Grow

Horizontale Balken tauschen im Zeitverlauf ihre Ränge, während sich die Werte ändern.

Füge bei [wo] ein „Bar Chart Race“ hinzu (auch racing bar chart genannt).
Horizontale Balken sollen wachsen und schrumpfen, während sich die Werte über die Zeit ändern, und bei jedem Rangwechsel weich aneinander vorbeigleiten, jeder mit seinem Label.
Bewege die Balken mit Transforms statt das Markup umzusortieren, damit Wechsel gleiten statt springen, und gib Nutzern eine Möglichkeit, es zu pausieren.

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.

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

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 Ring oder Kreisdiagramm füllt sich im Uhrzeigersinn bis zu seinem Prozentwert.

Füge bei [wo] eine „Donut Chart Fill“-Animation hinzu (auch pie chart sweep oder animated donut chart genannt).
Oben beginnend soll jedes Segment nacheinander im Uhrzeigersinn aufziehen, bis der Ring seinen Anteil zeigt, und am Ende weich abbremsen.
Spiele sie einmal ab, wenn das Diagramm ins Bild kommt, und stelle die tatsächlichen Werte für Screenreader als Text bereit.