Animated Extendable Counter In Vanilla JavaScript – finalcountdown

finalcountdown is a lightweight and easy JavaScript library for creating animated counters with formatting options and extendable graphical display options.

Basic usage:

Insert the main JavaScript file into the document and we’re ready to go.

<script src="fc.js"></script>

Create an animated numerical counter.

<div data-countdown-digital="true"><span>0</span></div>

Create a new instance and config the counter with the following options.

var myCounter = new CountDown({
    'elements': {
      'counter' : document.querySelector("[data-countdown-init]"),
      'digital' : document.querySelector("[data-countdown-digital]"), //optional
      'bar' : document.querySelector("[data-countdown-bar]"), //optinal
      'guage' : document.querySelector("[data-countdown-guage]") //optinal
    },
    'format' : 'percentage_html',
    'curNum' : 0,
    'newNum' : 10000,
    'min' : 0,
    'max' : 30000,
    'runtime' : 3, //animation framecount
    'easing': true, //rate of slowdown to divide speed
    'idelay' : 200, //initial animation delay
    'decimal': 4 //decimal count
});