Number Ticker
DisplayAnimated counter that interpolates to a target value. Ideal for displaying statistics or KPIs.
Playground
0
Controls
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value* | number | — | Target value. |
duration | number | 1200 | Animation duration (ms). |
decimals | number | 0 | Number of decimal places. |
prefix | string | — | Prefix (e.g. $, €). |
suffix | string | — | Suffix (e.g. %, k). |
separator | string | "," | Thousands separator. |
easing | 'linear' | 'ease-out' | 'ease-in-out' | "ease-out" | Easing curve. |
Examples
RevenueCounter with currency prefix.
$0
vue
<DsNumberTicker
:value="98432"
prefix="$"
:duration="1500"
/>PercentageDecimal value with suffix.
0.0%
vue
<DsNumberTicker
:value="94.5"
:decimals="1"
suffix="%"
:duration="800"
/>LinearLinear animation.
0
vue
<DsNumberTicker
:value="1000"
easing="linear"
:duration="2000"
/>Skeleton
Use DsNumberTickerSkeleton as a loading placeholder while content is being fetched.
Default
vue
<DsNumberTickerSkeleton />Accessibility
- The text is directly readable by screen readers.
- Respects prefers-reduced-motion: if enabled, the value is displayed instantly.