Donut Chart Fill

A circular arc grows around a ring to show percentage complete.

Add a "Progress Ring" (also called circular progress or radial progress) to [where].
Starting at the top, an arc should grow clockwise around the ring to show the percentage complete, easing out as it settles, while the number in the center counts up alongside it.
Keep the arc and the number in sync, and expose the value with proper progress bar semantics for screen readers.

Chart elements interpolate smoothly from old to new values when data changes or datasets toggle.

Add a "Chart Data Transition" (also called a chart update animation) to [where].
When the data changes, every bar should glide from its old value to its new one at the same time, smooth and unhurried, instead of redrawing from zero.
Start each update from the values currently on screen so a quick second change does not jump, and apply new values instantly for users who prefer reduced motion.

A ring or arc rotates continuously to show that something is loading.

Add a "Circular Spinner" (also called a spinner or throbber) to [where].
An arc should rotate steadily around a faint ring while it stretches longer and shorter, smooth and continuous.
Keep the rotation seamless, give it a loading label for screen readers, and slow or stop it for users who prefer reduced motion.

A number counts from a start value to a target value when it becomes visible.

Add a "Number Ticker" (also called count up or an animated counter) to [where].
When the number comes into view, it should count up from zero to its target, fast at first and slowing gently as it lands.
Use fixed-width digits so nothing around it jitters, count only once, and give screen readers and users who prefer reduced motion the final value right away.

Each digit rolls vertically to the new value when a number changes.

Add an "Odometer" number animation (also called rolling numbers or slot-machine digits) to [where].
When the value changes, each digit should roll vertically to its new digit, always rolling forward, with a slight stagger across digits and a small settle at the end.
Keep every digit the same width so the number does not shift, and expose only the final value to screen readers.

Lines and dots animate between locations on a map or globe.

Add "Animated Map Arcs" (also called globe arcs) to [where].
Curved lines should draw themselves between locations on a dotted map one after another, then retract toward their destination while a soft ring pulses there: calm and steady.
Stagger the arcs so they never move in unison, keep the loop seamless, and pause it for users who prefer reduced motion.