Skip to content

AGMStudio/jquery.countup.js

Repository files navigation

jquery.countup.js

jquery.countup.js 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

Features:

  • Auto-detect for integers, floats or formatted numbers
  • The plugin will also use the number of decimal places the original number is using.
  • Lightweight: ~1kb
  • Minimal setup

Install

You can use npm or bower.

npm install jquery.countup.js

or

bower install jquery.countup.js

Dependencies

Package dependencies: jquery and waypoints.

Usage

Includes

<script src="jquery.min.js"></script>
<script src="jquery.waypoints.min.js"></script>
<script src="jquery.countup.min.js"></script>

HTML

<span class="counter">1,498,547.00</span>
<span>$</span><span class="counter">7.99</span>
<span class="counter">1455455</span>

You can use data-counter-time and data-counter-delay.

<span class="counter" data-counter-time="5000" data-counter-delay="50">1981</span><br><br><br>
<span class="counter" data-counter-time="100" data-counter-delay="20">9842</span><br><br><br>

Jquery

$('.counter').countUp();

or with extra parameters (default options)

$('.counter').countUp({
    delay: 10,
    time: 2000
});
  • delay - The delay in milliseconds per number count up
  • time - The total duration of the count up animation

Note: These values are overwritten with data elements.

Social Stuff