sidonzl / jquery.counterup

jquery.counterup is a lightweight jQuery plugin that counts up to a targeted number when the number becomes visible.

jquery.counterup

jquery.counterup is a jQuery plugin that animates a number from zero (counting up towards it). It supports counting up:

• integers 12345
• floats 0.1234
• formatted numbers 1,234,567.00
• time 21:45:00

Features:

• Auto-detect for integers, floats or formatted numbers.
• The plugin will also use the number of decimal places the original number is using.
• Start counter with a different duration and delay by setting data-counterup-time="" and data-counterup-delay="".
• Lets you use your own formatter.
• Lightweight: ~1kb
• Minimal setup

Requires waypoints.js

Demo

DEMO

Install with Bower

bower install jquery.counterup

=====

Include

<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.0/jquery.waypoints.min.js"></script>
<script src="jquery.counterup.min.js"></script>

HTML

With default values from plugin instantiation.

<span class="counter">1,234,567.00</span>
<span>$</span><span class="counter">1.99</span>
<span class="counter">12345</span>

With values from data attribute.

<span class="counter" data-counterup-time="1500" data-counterup-delay="30" data-counterup-beginat="100">1,234,567.00</span>

jQuery

$('.counter').counterUp();

or with extra parameters

$('.counter').counterUp({
    delay: 10,
    time: 1000,
    offset: 70,
    beginAt: 100,
    formatter: function (n) {
      return n.replace(/,/g, '.');
    }
});

delay - The delay in milliseconds per number count up

time - The total duration of the count up animation

offset - The viewport percentile from which the counter starts (by default it's 100, meaning it's triggered at the very moment the element enters the viewport)

beginAt - The number from which to count up

formatter - A callback to format the number with