jQuery Plugin For Animating Numbers - rollNumber

rollNumber is an easy and tiny jQuery plugin to create an animated counter that animates a numeric value from zero to a new one at a given speed.

See Also:

• Retro Number Rolling/Flipping Effect With jQuery - digitScroller.js
• Smooth Number Rolling Animation In jQuery - numberAnimate.js
• Simple jQuery Plugin To Animate Numeric Text - Animate Numbers

How to use it:

1. Create a container for the animated counter.

<div class="counter"></div>

2. Load the rollNumber plugin after jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/jquery.rollNumber.js"></script>

3. Initialize the plugin on the counter container and determine the numberic value that counter will count up towards as follows:

$('.counter').rollNumber({
  number: 123456
})

4. Or specify the number in the data-number attribute in cases where you have multiple counters on a page.

<div class="counter" 
     data-number="123456">
</div>

<div class="counter" 
     data-number="654321">
</div>

...

5. Customize the style of the animated counter.

$('.counter').rollNumber({
  fontStyle: { 
    font-size: 16,
    color: '#FF0000',
    font-family: 'Roboto',
    // more styles here
  }
})

6. Determine the animation speed. Accepted values: 'slow', fast', or milliseconds. Default: 100.

$('.counter').rollNumber({
  speed: 200
})

7. Determine the time to wait before animating the number. Default: 100.

$('.counter').rollNumber({
  interval: 200
})

8. Customize the character used as the thousands separator. Default: false.

$('.counter').rollNumber({
  fsymbol: ','
})

9. Determine whether to add leading zeros to numbers.

$('.counter').rollNumber({
  rooms: 9
})

==> 000123456

Changelog:

2020-11-04

• Bugfix

2020-08-03

• JS updated

---

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