jQuery countTo Plugin

jQuery countTo is a jQuery plugin that will count up (or down) to a target number at a specified speed, rendered within an HTML DOM element.

Requirements:

jQuery countTo requires the latest version of jQuery.

Usage:

There are two main approaches to using this plugin: through data attributes on DOM nodes, and through JS options explicitly passed to the countTo function.

These two methods can be mixed and matched as well. Data attributes takes precedence over JS options.

Data Attributes

This approach allows you to define data-* attributes on whatever DOM element will act as a container for your counter. This is useful when you already know the values at the time that you are constructing the DOM.

<span class="timer" data-from="25" data-to="75"></span>

<script type="text/javascript">
  $('.timer').countTo();
</script>

A more detailed example that demonstrates all possible options being used is as follows.

<span class="timer" data-from="0" data-to="100"
      data-speed="5000" data-refresh-interval="50"></span>

<script type="text/javascript">
  $('.timer').countTo();
</script>

Refer to the Options section below for more info on the various options available.

JavaScript Options

This approach allows you to pass values to the countTo function. This is useful when you don't know the values at the time the DOM is being rendered.

<span class="timer"></span>

<script type="text/javascript">
  $('.timer').countTo({from: 0, to: 500});
</script>

A more detailed example that demonstrates all possible options being used is as follows.

<span class="timer"></span>

<script type="text/javascript">
  $('.timer').countTo({
    from: 50,
    to: 2500,
    speed: 1000,
    refreshInterval: 50,
    formatter: function (value, options) {
      return value.toFixed(options.decimals);
    },
    onUpdate: function (value) {
      console.debug(this);
    },
    onComplete: function (value) {
      console.debug(this);
    }
  });
</script>

Refer to the Options section below for more info on the various options available.

Options:

A complete listing of the options that can be passed to the countTo method is below.

Functions:

This plugin also supports functions, primarily for changing state. Functions are called by passing the name as a string to the countTo jQuery function, e.g.: $('#timer').countTo('stop').

Created By:

Matt Huggins

License:

jQuery-countTo is released under the MIT license.