Increment Numeric Value At A Given Speed - jQuery Counter

File Size: 2.42 KB
Views Total: 9440
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Increment Numeric Value At A Given Speed - jQuery Counter

A really simple jQuery counter (count up to) script for incrementing up to a certain number at a given speed and performing a callback when the countup is finished.

How to use it:

1. Wrap the initial value in an inline element and specify the target number in the data-count attribute:

<span class="counter" data-count="123">0</span>
<span class="counter" data-count="1234">0</span>
<span class="counter" data-count="12345">0</span>

2. Include the needed jQuery JavaScript libaray on the html page.

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

3. The main JavaScript (jQuery script) to enable the counter. Feel free to override the duration, easing, step, complete parameters as per your needs.

$(document).ready(function(){

  $('.counter').each(function() {
    var $this = $(this),
        countTo = $this.attr('data-count');

    $({ countNum: $this.text()}).animate({
      countNum: countTo
    },

    {

      duration: 3000,
      easing:'linear',
      step: function() {
        $this.text(Math.floor(this.countNum));
      },
      complete: function() {
        $this.text(this.countNum);
      }
    });
  });

});

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