Skip to main content
Create smooth number counting animations with customizable transitions and decimal places.

​
Usage

<NumberTicker
  :value="100"
  direction="up"
  :decimalPlaces="0"
  :delay="0"
  :duration="1000"
  transition="easeOutCubic"
/>

​
Props

​
value
int
default:"0"
Value to count to.
​
direction
'up' | 'down'
default:"up"
Direction to count in.
​
decimalPlaces
number
default:"0"
Number of decimal places to show.
​
delay
number
default:"0"
Delay before counting (in milliseconds).
​
duration
number
default:"1000"
Total duration for the entire animation (in milliseconds).
​
transition
TransitionPresets
default:"easeOutCubic"
Name of transition preset. See VueUse transitions.

​
Credits

Build docs developers (and LLMs) love

Get started for freeTalk to us