August 10, 2022

Animated Extendable Counter using vanilla JS | finalcountdown

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

free number counter animation, count up animation, animated number counter javascript

add easing options:

  • animated numerical counter
  • extendable formatting & graphical display options
  • easing

How to make use of it:

1. Insert the main JavaScript file into the document.

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

2. Create an animated numerical counter.

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

3. Create a new instance and configure 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
});

animated extendable counter, finalcountdown Plugin/Github


See Demo And Download

Official Website(tcouther): Click Here

This superior jQuery/javascript plugin is developed by tcouther. For extra advanced usage, please go to the official website.

Share

You may also like...

Leave a Reply

Your email address will not be published.