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%
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
| Property | Type | Default | Description |
|---|---|---|---|
| Value | double | 0 | Target value to animate to. Changing this triggers a new animation from the previous value. |
| StartValue | double | 0 | Initial value to count from on first render. |
| DurationMs | int | 1500 | Animation duration in milliseconds. |
| Decimals | int | 0 | Number of decimal places to display and animate through. |
| Prefix | string? | null | Text rendered before the number (e.g. $). |
| Suffix | string? | null | Text rendered after the number (e.g. %, k). |
| ThousandsSeparator | string | "," | Thousands group separator. Use "" to suppress, "." for European format. |
| Class | string? | null | Additional CSS classes. Use 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.