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:

• Animating Numbers Counting Up with jQuery Counter-Up Plugin
• jQuery Plugin For Counting Up Number While Scrolling - numscroller
• Simple jQuery Plugin For Animating Numbers - Numerator

How to use it:

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

<script src="//code.jquery.com/jquery-1.11.2.min.js"></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.

$('.spincrement').spincrement({
// OPTIONS HERE
});

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:

2016-11-10

• Escape regex chars in thousands separator

2015-10-20

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

2015-10-18

• 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.