Skip to content
All effectsKPI

Odometer

One column of digits per place, each sliding at its own speed. No counter maths.

Pure CSSKPIPro

Usage

012340987603692%

Meant for

KPIMeterNumber Stepper

Examples

On a KPI

One column of digits per place, each sliding at its own speed. Slightly different durations per column is what makes it read as a counter rather than as one block moving — and each digit is its own element, so the column scrolls behind a fixed window instead of the window itself moving. Five digits per column, the last one the reading.

Orders today0123403692051784.3%vs yesterday

The class is wm wm-odometer — the first half is the marker the trigger and reduced-motion rules hook into, the second is the effect.