An animated counter for Vue.js that animates the counting up to a number you specify.
How to use it:
Import Vue and the vue-animated-number component.
import Vue from 'vue' import VueNumber from 'vue-number-animation'
Register the component in your app.
Vue.use(VueNumber)
Create the counter and specify the number you want to count towards to:
<number ref="numberExample" :to="5000" /> <number>
All default props to config the counter.
from: { type: [Number, String], default: 0 }, to: { type: [Number, String], required: true, default: 0 }, format: { type: Function, default: (num) => parseInt(num) }, duration: { type: Number, default: 1 // Duration of animation in seconds }, easing: { type: String, default: 'Power1.easeOut' }, delay: { type: Number, default: 0 // Delay the animation in seconds }, animationPaused: Boolean // Stops animation before start
Events.
<number ref="numberExample" :to="5000" @start="startFunc" @complete="completeFunc" @update="updateFunc" /> <number>
API methods.
- play(): starts the counter
- pause(): pauses the counter
- restart(): restarts the counter
Preview:
Changelog:
07/17/2021
- Fix: Build
Download Details:
Author: nkoik
Live Demo: https://codesandbox.io/s/8256nwlq78
Download Link: https://github.com/nkoik/vue-animated-number/archive/master.zip
Official Website: https://github.com/nkoik/vue-animated-number
Install & Download:
# NPM
$ npm install vue-number-animation --save