A simple jQuery number counter plugin – counter.js

Counter.js is a jQuery number counter plugin – it counts to up or down from a given number, with a custom speed.

jQuery number counter with Easing Effects

A small counter in JavaScript as a jQuery plugin. We can configure many options such as a duration, easing effect, auto start, start at count, placeholder (for use with auto start). We can handle callbacks.

jQuery number counter plugin in action
jQuery number counter plugin in action

Usage

Add HTML markup:

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

Run the plugin in JS code – a simple call:

$("#counter").counter();

A call with options:

$("#counter").counter({
  autoStart: false,           
  duration: 5000,             
  countFrom: 10,              
  countTo: 30,                
  runOnce: true,              
  placeholder: "?",    

  // see: jquery.easing plugin, default: "easeOutQuad"
  easing: "easeOutCubic",  

  onStart: function() {},     
  onComplete: function() {},  

  numberFormatter:            
    function(number) {
      return "$ " + number;
    }
});

Counter.js supports counting up and counting down. When the autoStart option is set to false you have to start the counter using the “start” command on the element like so:

$("#counter").counter("start");

We need to add the libraries, but in following order:

– jquery.js

– jquery.easing.js

– counter.js

License: MIT

Demo / example:

http://tombruijn.github.io/counter.js

Get the jQuery number counter plugin from GitHub:

https://github.com/tombruijn/counter.js

See also:

jQuery countdown timer plugins

A good jQuery text counter plugin

jQuery – count characters in textarea and text inputs

Enjoy!

Share:Share on Facebook2Share on Google+1Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1