Number Ticker
NumberTicker animates counting from a start value to a target value with a smooth ease-out animation. Re-animates whenever value changes.
Basic usage
1250
vue
<NumberTicker :value="1250" />With prefix and suffix
$99 USD42%
vue
<NumberTicker :value="99" prefix="$" suffix=" USD" />
<NumberTicker :value="42" suffix="%" />Decimal places
3.1416
vue
<NumberTicker :value="3.14159" :decimal-places="4" />Custom duration and delay
500
vue
<NumberTicker :value="500" :duration="3000" :delay="500" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Target value to count to |
from | number | 0 | Starting value |
duration | number | 1500 | Animation duration in ms |
delay | number | 0 | Delay before animation starts in ms |
decimalPlaces | number | 0 | Number of decimal places to display |
prefix | string | '' | Text prepended to the number (e.g. '$') |
suffix | string | '' | Text appended to the number (e.g. '%') |