jQuery Animated Counter

(function (Example) { 'use strict'; return new Example(window.jQuery, window, document); }(function ($, window, document) { 'use strict'; // Plugin $.fn.countTo = function(target, options) { // Animation settings var settings = $.extend({ countFrom: null, duration: 4000, easing: 'swing', suffix: '', step: function(now) { this.innerHTML = Math.ceil(now) + settings.suffix; // You can also use $(this).text() to change conent. } }, options); return this.each(function() { var $this = $(this); $this.prop('counter', (settings.countFrom !== null ? settings.countFrom : $this.text())).animate({ counter: +target }, settings); }); }; $(function() { // Usage // Example: <p id="elem">0%</p> $('#elem').countTo(100, { suffix: '%', complete: function() { // Use jQuery's animate() `complete` method for a callback this.className = 'done'; } }) // During count: // <p id="elem">33%</p> // ... // <p id="elem">88%</p> // After counting: // <p id="elem" class="done">100%</p> }); }));