Increment Numeric Value At A Given Speed - jQuery Counter

File Size: 2.42 KB
Views Total: 8149
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.


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

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


      duration: 3000,
      step: function() {
      complete: function() {


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