jQuery Plugin For Animating Numbers From X To Y - dynamicNumber

dynamicNumber is a small yet configurable jQuery counter plugin which allows to animate a number from a value to another you specify.

How to use it:

1. Import the jQuery dynamicNumber plugin's script into the webpage. Make sure you first have jQuery library installed.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery-dynamicNumber.js"></script>

2. Create an element for the counter and specify the start/end values in the data attributes as these:

<span class="dynamicNumber" 
      data-from="0" 
      data-to="100">
      0
</span>

3. Enable the dynamicNumber plugin.

$('.dynamicNumber').dynamicNumber();

4. Start the number animation.

$('.dynamicNumber').dynamicNumber('start');

5. All possible options to config the number animation. Note that the options can be passed via data attributes as you seen in the step 2.

$('.dynamicNumber').dynamicNumber({
  from: 0,
  to: 100,
  duration: 1000,
  decimals: 0,
  format: function format(n, options) {
    return n.toFixed(options.decimals);
  },
  percentage: {
    decimals: 0
  },
  currency: {
    indicator: '$',
    size: 3,
    decimals: '2',
    separator: ',',
    decimalsPoint: '.'
  },
  group: {
    size: 3,
    decimals: '2',
    separator: ',',
    decimalsPoint: '.'
  }
});

6. API methods.

// start the animation
$('.dynamicNumber').dynamicNumber('start');

// finish the animation
$('.dynamicNumber').dynamicNumber('start');

// get the current number
$('.dynamicNumber').dynamicNumber('get');

// enable the animation
$('.dynamicNumber').dynamicNumber('enable');

// disable the animation
$('.dynamicNumber').dynamicNumber('disable');

// goto 50
$('.dynamicNumber').dynamicNumber('go', 50);

// stop the animation
$('.dynamicNumber').dynamicNumber('stop');

// reset the animation
$('.dynamicNumber').dynamicNumber('reset');

// destroy the animation
$('.dynamicNumber').dynamicNumber('destroy');

7. Events.

$('.dynamicNumber')..on('dynamicNumber::ready', function (e) {
  // on ready
});

$('.dynamicNumber')..on('dynamicNumber::init', function (e) {
  // on init
});

$('.dynamicNumber')..on('dynamicNumber::update', function (e) {
  // on update
});

$('.dynamicNumber')..on('dynamicNumber::start', function (e) {
  // on start
});

$('.dynamicNumber')..on('dynamicNumber::stop', function (e) {
  // on stop
});

$('.dynamicNumber')..on('dynamicNumber::reset', function (e) {
  // on reset
});

$('.dynamicNumber')..on('dynamicNumber::finish', function (e) {
  // on finish
});

$('.dynamicNumber')..on('dynamicNumber::enable', function (e) {
  // on enable
});

$('.dynamicNumber')..on('dynamicNumber::disable', function (e) {
  // on disable
});

$('.dynamicNumber')..on('dynamicNumber::destroy', function (e) {
  // on destroy
});

---

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