Animated Counter For Vue.js – VueNumber

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