Number Increment Animations with jQuery - spincrement

File Size: 5.22 KB
Views Total: 13375
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Number Increment Animations with jQuery - spincrement

spincrement is a jQuery plugin which leverages jQuery animate() to animate numbers from zero (or any specified number) to a new one you specify.

See also:

How to use it:

1. Load the jquery.spincrement.js script after you have jQuery included.

<script src="//"></script>
<script src="jquery.spincrement.js"></script>

2. Wrap the target number you want to count up to into a DIV container.

<div class="spincrement">100</div>

3. Call the plugin on the DIV container to star the number increment animation on page load.


4. Available options to customize the animation.

from: 0,
to: false,
decimalPlaces: 0,
decimalPoint: '.',
thousandSeparator: ',',
duration: 1000, // ms; TOTAL length animation
leeway: 50, // percent of duraion
easing: 'spincrementEasing',
fade: true

Change log:


  • Escape regex chars in thousands separator


  • Add support for some HTML attributes: data-from, data-to, data-dp


  • Handle thousands in input; infer decimal places when null

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