Live Panel
Number, delta and sparkline on one timeline: the last place of the figure steps through its digits, the delta swaps to the new reading, and the line draws itself with a head riding the same path through offset-path: path(). pathLength on the stroke is what lets one dash pair work for any path length.
Usage
Events / min1,402468078.4%11.2%
Meant for
Examples
On a KPI
Figure, delta and sparkline on one timeline, so the panel reads as one reading arriving rather than three things moving. The deltas are WunderUI Trend Chips stacked in one grid cell; the head rides the same path() the line draws, and pathLength="1" is what lets one dash pair draw a path of any length.
The class is wm wm-live-panel — the first half is the marker the trigger and reduced-motion rules hook into, the second is the effect.