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.

Prop	Type	Default
value Required numeric value rendered by the digit roller.	number	-
format Intl.NumberFormat options used for grouping, currency, compact notation, units, and fractions.	Intl.NumberFormatOptions	{}
locales Locale or locale list passed to Intl.NumberFormat.	string \| string[] \| undefined	undefined
prefix / suffix Custom text rendered before or after the formatted value.	string	''
animated Enables or disables all digit and layout animations.	boolean	true
duration Default animation duration in milliseconds.	number \| undefined	900
spinEasing / flipEasing CSS easing preset or custom easing string for digit reels and layout transitions.	'default' \| 'spring' \| 'overshoot' \| string	'default'
continuous Spins lower-place unchanged digits when a higher-place digit changes.	boolean	false
digits Per-position digit reel limits. Use for clocks or values where a digit max is below 9.	Record<number, { max?: number }>	{}
stagger Delay in milliseconds added between displayed elements.	number	0
animationsStart / animationsFinish Events emitted when a visible animation batch starts or completes.	Output<void>	-
ngsDigitRollerGroup Directive that synchronizes several Digit Roller updates in the same frame.	Directive	-

Using this component in production?

Source code, templates, and commercial support

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

View pricing →Explore admin templates

Digit Roller

Source code, templates, and commercial support

Build the surrounding workflow