Small jQuery Number Counter Plugin with Easing Effects - counter.js

Counter.js is a small jQuery counter plugin that allows to count to or down from a given number at a custom speed, with easing effects support (jQuery easing plugin required.).

Basic Usage:

1. Include the latest jQuery library and counter.js script in the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/counter.min.js" type="text/javascript"></script>

2. Include jQuery easing plugin for easing effects.

<script src="js/jquery.easing.js" type="text/javascript"></script>

3. Create a container for the number counter.

<div id="counter"></div>

4. Initialize the plugin with options.

$("#counter").counter({
autoStart: true, // true/false, default: true
duration: 5000, // milliseconds, default: 1500
countFrom: 10,// start counting at this number, default: 0
countTo: 30,// count to this number, default: 0
runOnce: true,// only run the counter once, default: false
placeholder: "?", // replace the number with this before counting,
easing: "easeOutCubic", // easing effects
onStart: function() {}, // callback on start of the counting
onComplete: function() {}, // callback on completion of the counting
numberFormatter: // function used to format the displayed numbers.
    function(number) {
      return "$ " + number;
    }
});

Change log:

v0.0.3 (2016-07-26)

• Allow count from and to be set with attributes

v0.0.3 (2014-04-26)

• Add numberFormatter option.

---

This awesome jQuery plugin is developed by tombruijn. For more Advanced Usages, please check the demo page or visit the official website.