Odometer Rolling Stat Counters — Free odometer.js Dashboard Snippet

Odometer.js recreates the physical odometer effect — each digit spins independently on its own vertical reel until it lands on the new value — for arbitrary numbers on a web page. This snippet uses it to build a row of dashboard stat tiles that roll from zero to their real value the moment the grid scrolls into view, with a replay button to trigger the animation again on demand.

Odometer's API is the value itself

Unlike a typical animation library where you call something like .play() or .animate(), odometer.js works by intercepting how you update the element's value: once an element is wrapped with new Odometer({ el, value: 0 }), calling .update(newValue) — or, in odometer's classic usage, simply assigning to the underlying element's innerHTML — triggers the roll. The library replaces the element's content with a structure of individually-positioned digit reels, so setting a new value doesn't just swap text, it animates each digit to its new position on its own reel.

Triggering the roll on scroll

Rather than rolling on page load (which the visitor might miss if the stats are below the fold), this snippet wraps the four tiles in a single IntersectionObserver watching the .ost-grid container. Once it's roughly 40% visible, rollIn() fires once for all four odometers and the observer disconnects — this is the same "reveal once, on scroll" pattern used by Count Up and Number Ticker, just with odometer.js handling the actual digit animation instead of a manual requestAnimationFrame tween.

Independent digit reels

Because each digit rolls on its own reel rather than the whole number counting up as one unit, larger numbers (like the 15,230 active-users stat) look visually distinct from a typical linear count-up — the ones digit might cycle through several values while the ten-thousands digit only moves once. This is odometer.js's signature visual character and the reason to reach for it specifically over a generic number-tweening approach.

Theme CSS handles the visuals

The CDN's odometer-theme-minimal.css supplies the actual sliding/rolling visual mechanics (each digit as a small vertically-scrolling strip) — this snippet's own CSS only sets color, size, and weight so the digits match the surrounding dashboard palette. Odometer ships several built-in themes (minimal, car, digital, plaza, slot machine, train station) that can be swapped by simply linking a different theme CSS file.

Customizing it

Change Odometer.options.duration for a faster or slower roll, swap the theme stylesheet for a different visual style, or feed live values from an API instead of hardcoded targets. Pair this with Dashboard Widget Grid or Stats Card for a full metrics panel.