Minimal Animated Counter For jQuery - Counter.js

Counter.js is a small, cross-browser, animated number counter plugin for jQuery that allows you to counts up to a certain number in an animated way.

How to use it:

1. Load the counter.js script after jQuery JavaScript library but before you close the body tag.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<script src="js/counter.js"></script>

2. Add the CSS class count-this to the target element containing the number you want to animate.

<h4 class="count-this">1200</h4>
<h4 class="count-this">800</h4>
<h4 class="count-this">900</h4>
...

3. That's it. You can customize the animated counter (e.g. duration, easing function, etc) in the JavaScript.

// Find the 'count this' class on the page and animate it
$('.count-this').each(function () {

  // Start the counting from a specified number - in this case, 0!
  $(this).prop('Counter',0).animate({
      Counter: $(this).text()
  }, {
      // Speed of counter in ms, default animation style
      duration: 2000,
      // Easing function
      easing: 'swing',
      step: function (now) {
        // Round up the number
          $(this).text(Math.ceil(now));
      }
  });
});

---

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