Vanilla JavaScript Count Up Library – count-up.js

Category: Javascript | January 24, 2017
Author: DarioCorno
Views Total: 2,835
Official Page: Go to website
Last Update: January 24, 2017
License: MIT

Preview:

Vanilla JavaScript Count Up Library – count-up.js

Description:

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>

You Might Be Interested In:


Leave a Reply