🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Countup.js is a lightweight (~2kb) jQuery plugin that animates a numerical value by counting up from zero when you scroll to it.

counter count-up

Documentation

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


You May Also Like