NumberTicker
Animated count-up from zero to target number. Supports prefix, suffix, decimals, and thousands separator — the canonical numeric animation component in Lumeo.
Installation
dotnet add package Lumeo.Motion
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <NumberTicker />
When to Use
- Animate dashboard KPI values on page load for visual impact.
- Show real-time counter updates (e.g. active sessions, download counts).
- Add currency or percentage context via the
PrefixandSuffixprops.
0
0.0
$0
0.0%
1,000
Counts up from 1,000 to 1,280
0
Fast (500ms)
0
Slow (3000ms)
Drag the slider to set a new target — the ticker animates to the new value on each release.
Target: $25,000
$0
0
European format (dot)
$0
USD currency
0.0%
Percentage
Migration from NumberCountUp:
NumberTicker now includes all features previously unique to
NumberCountUp — including
ThousandsSeparator,
Prefix,
Suffix, and
Decimals.
NumberCountUp was removed; NumberTicker supersedes it with smoother easing and separator support.
API Reference
NumberTicker
ThousandsSeparator defaults to the current culture's grouping separator; set it explicitly (e.g. "." for European format) or to "" to suppress grouping. Class also accepts Tailwind font/size utilities to style the number.
Related Components
- KpiCard — Dashboard tile that can embed a NumberTicker as its value.
- Statistic — Big-number statistic display with label and unit.
- TextReveal — Word-by-word reveal animation on scroll.