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

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.