Minimal Animated Counter For jQuery - Counter.js

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.

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

<script src="" 
<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!
      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 awesome jQuery plugin is developed by LadyBiosphere. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 20.01.2018
  • Source