Animated Number counter up plugin in Jquery

In this tutorial I’ll show you awesome Animated Number counter up plugin in Jquery to create fancy incremental number count in specific time delay. bfintal has created Counter-Up 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

Integration:-

Include required libraries on page jquery, counter-up js and also it dependent on waypoints.js so don’t forget to include this.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js">script>
<script src="jquery.counterup.min.js">script>

Sample Html and define class or id to which you want to put counter action.

<span class="counter">1,231,567.00span>
<span>$span><span class="counter">2.99span>
<span class="counter">123456span>

Finally add counter up function on defined class to make it actionable.

<script>
$(function() {   
  $('.counter').counterUp({
            delay: 10,
            time: 1000
        });
});
script>

See live demo and download source code.

Related