Digit Roller

Digit Roller animates individual digits when a number changes, using a slot-machine style reel effect powered by the Web Animations API.

Key Features:

Per-digit animation: Each digit spins independently while separators, prefixes, suffixes, and currency symbols stay aligned.
Intl formatting: Pass standard Intl.NumberFormatOptions for compact numbers, currency, percentages, units, and localized numerals.
Dashboard ready: Use grouped updates to synchronize several KPI values in one animation frame.
Accessible fallback: Screen readers receive plain formatted text and reduced-motion preferences can disable animation.

Use Digit Roller for live metrics, analytics counters, financial totals, quotas, countdowns, scoreboards, and compact dashboard cards. Do not use it for editable numeric inputs or dense table cells where frequent animation would distract from scanning.

The NgStarter Angular Digit Roller component animates individual digits in formatted numbers with a slot-machine style reel effect. Use it for KPI cards, dashboard counters, financial summaries, quotas, and live operational metrics.

Number Sizes

Render the same animated number treatment at several text scales, from small inline counters to large display metrics.

Tiny

Inline badges, deltas, and compact helper text.

12.8%

Small

Short counters inside dense product UI.

tasks

Medium

Default metric size for cards, lists, and summaries.

1,280

Large

Primary totals and pricing surfaces.

$24,999.99

Display

Big dashboard values with compact notation.

128.4K

views

Hero

Headline financial or operational numbers.

$1,236,511.34

Social Actions

Pair Digit Roller with icon buttons for engagement counters and compact action surfaces.

Progress Bar

Animate the visible percentage and supporting counts while the NgStarter progress bar tracks the same value.

Deployment progress

64steps remaining

36%

Gauge

Use Digit Roller inside a gauge value slot when radial metrics need the same animated number.

Health score

The same value drives the gauge arc and the animated number in the center.

Using this component in production?

Source code, templates, and commercial support

NgStarter includes source code, admin dashboard templates, and commercial support.