Animated Number Counting Up In jQuery

In this tutorial, we'll be using jQuery's animate() method to create an animated number counting up effect on the page.

This jQuery script will help you create an elegant looking counter for your site. Not only does it look good, it’s also very simple and easy to use, which means you don’t need any coding skills. 

How to use it:

1. Place the number you want to count 1up to in an inline element.

<span class="count">
  1024
</span>

<span class="count">
  2048
</span>

<span class="count">
  4096
</span>

2. Load the necessary jQuery library at the end of the document.

<script src="/path/to/cdn/jquery.min.js"></script>

3. The core JavaScript (jQuery script) to enable the countup effect on page load.

$(".count").each(function () {
  $(this)
    .prop("Counter", 0)
    .animate(
      {
        Counter: $(this).text(),
      },
      {
        duration: 4000,
        easing: "swing",
        step: function (now) {
          now = Number(Math.ceil(now)).toLocaleString('en');
                                $(this).text(now);
        },
      }
    );
});

---

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