Vanilla JavaScript Count Up Library – count-up.js

count-up.js is a really small JavaScript library used for counting up towards a numeric value at a certain speed. With support for custom suffix and prefix.

How to use it:

Import the core JavaScript count-up.js into the webpage.

<script src="count-up.js"></script>

To create a basic count up component, just add the CSS class ‘countup’ to target element and done.

<span id="demo" class="countup"></span>

Create a new counterUp object with default values:

var cu = new counterUp();

Start the count up:

cu.start();

All default configuration options.

var cu = new counterUp({
    // duration in milliseconds
    duration: 3000,       
    // string to prepend to the value
    prepend: '',        
    // string to apend to the value
    append: '%',        
    // selector used to find elements on wich applycountUp
    selector: '.countup',   
    // default start
    start: 0,         
    // default end
    end: 100,         
    // should we display integer values only
    intvalues: false,     
    // default counting interval
    interval: 100   
        
});

You can also config the count up directly using cup-OPTION attribute as this:

<span id="demo" 
      class="countup" 
      cup-end="100" 
      cup-append="%" 
      cup-prepend="">
</span>