Create An Animation That Shows Automatic Count | Vue3 Autocounter

Vue3 Autocounter is a lightweight Vue 3 component built with TypeScript, you can use it to create an animation that automatically displays a count of any quantity with a specified duration, and can be used to count up and down.

animated number counter javascript, animated number counter html, number counter in javascript, counter in javascript example, number counter html template

How to make use of it:

Install and download:

# NPM
$ npm i vue3-autocounter

1. Import the component.

// Global
import { createApp } from 'vue';
import Vue3Autocounter from 'vue3-autocounter';
import App from './App.vue';
createApp(App)
.component('vue3-autocounter', Vue3Autocounter)
.mount('#app');
 
// Local
import { defineComponent } from 'vue';
import Vue3autocounter from 'vue3-autocounter';
export default defineComponent({
  name: 'Demo',
  components: {
    'vue3-autocounter': Vue3autocounter
  }
});

2. Use the counter in your template:

<vue3-autocounter ref='counter' :startAmount='0' :endAmount='2022' />

3. Component props available.

startAmount: {
  type: Number,
  default: 0
},
endAmount: {
  type: Number,
  default: 0,
  required: true
},
duration: {
  type: Number,
  default: 3,
  validator(duration: number): boolean {
    return duration >= 1;
  }
},
autoinit: {
  type: Boolean,
  default: true
},
prefix: {
  type: String,
  default: ''
},
suffix: {
  type: String,
  default: ''
},
separator: {
  type: String,
  default: ','
},
decimalSeparator: {
  type: String,
  default: '.'
},
decimals: {
  type: Number,
  default: 0,
  validator(decimals: number): boolean {
    return decimals >= 0;
  }
}

4. Turn on the function when the counter is finished.

<vue3-autocounter ref='counter' :startAmount='0' :endAmount='2022'  @finished='alert(`Counting finished!`)' />

Automatic Counter, Vue3 Autocounter Plugin/Github, jquery number counter animation on scroll, css number counter animation

See Demo And Download

Official Website(ps-cristopher): Click Here

This superior jQuery/javascript plugin is developed by ps-cristopher. For extra Advanced Usages, please go to the official website.