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:

1. Import Vue and the vue-animated-number component.

import VueNumberAnimation from "vue-number-animation";

2. Create the counter and specify the number you want to count towards to:

<VueNumberAnimation
  ref="numberExample"
  :to="5000"
  />

3. All default props to config the counter.

from: {
  type: [String, Number] as PropType<number>,
  default: 0,
},
to: {
  type: [String, Number] as PropType<number>,
  default: 100,
},
format: {
  type: Function as PropType<(num: number | string) => number | string>,
  default: (num: number) => num,
},
duration: {
  type: Number as PropType<number>,
  default: 1,
},
easing: {
  type: String as PropType<string>,
  default: "linear",
},
delay: {
  type: Number as PropType<number>,
  default: 0,
},
tag: {
  type: String as PropType<keyof HTMLElementTagNameMap>,
  default: "span",
},
autoplay: {
  type: Boolean as PropType<boolean>,
  default: true,
},

4. Events.

<VueNumberAnimation
  ref="numberExample" 
  :to="5000"
  @start="startFunc"
  @complete="completeFunc"
  @update="updateFunc" />

5. API methods.

  • play(): starts the counter
  • pause(): pauses the counter
  • restart(): restarts the counter

Preview:

Animated Counter For Vue.js - VueNumber

Changelog:

v2.0.2 (12/04/2023)

  • Bugfixes

v2.0.0 (12/03/2023)

  • chore: Upgrade version for 2 & 3

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
Tags:

Add Comment