jQuery Counter to Count Up to a Target Number

Are you trying to build a counter that counts up to a target number? You might be working on such a project. If yes, then you are on the right page. In this jQuery tutorial, we are going to create an ultra-lightweight (less than 1KB) number counting function with custom increment speed. The main purpose of this jQuery counter script/function is to count up to a target number.

This counter script depends on the jQuery animate function without any extra number increment function. That’s why its too lite, reliable, and faster than any counter plugin. However, it’s fully configurable and customizable according to your needs. You can easily implement it to count up numbers to the target value.

How to Build a Counter to Count Up to a Target Number

In order to create a number counter, you need to follow only three steps. Yes! you heard it right, we’ll finalize the number counting project in only three easy steps. The very first step is to create an HTML element that will handle/render the counter. In the second step, we’ll style the counter look by using CSS. We’ll create a jQuery function to count the number to the target value in the final step.

In HTML structure, we’ll give the targeted number input by using the HTML5 data-attribute. Although we can put the number value directly in the JavaScript variable, by using the HTML data attribute, we can run multiple counters on the same page. So, create a span element with a class name "counter" and define its data-count attribute and place a target number that we want to increase from 0 up to that number.

Additionally, you can wrap this counter in a container for its adjustment in regards to CSS styles. To do so, create a div element with a class name "container" and place your counter inside it.

<div class="container">
   <span class="counter" data-count="123">0</span>
</div>

Now, its time to style the counter using CSS. So, target the ".container" selector and define its styles according to your needs. Similarly, set the CSS rules for the counter (numbering) such as color, font-size, etc. The following are some basic styles for the number counter whose output you have seen on the demo page.

 .container {
    text-align: center;
    margin: 10px auto;
    max-width: 960px; 
}

.counter {
  color: #fff;
  display: inline-block;
  margin: 10px;
  font-size:50px;
  width:200px;
  background-color: #222;
  padding: 15px;
}

After that, include the jQuery JavaScript library into your HTML document to get ready for the development of a counter function.

<!-- jQuery -->
<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>

Finally, create each function for the “.counter” selector, target its data-count attribute and store this value in a variable for further use. Use the jQuery animate function to count the number. To increase/decrease the speed of the number counting, update the “duration” value. Similarly, you can use a custom easing function for the transition. In order to execute a callback function, use the “complete” attribute of the animate function.

$(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);
      //alert('finished');
    }
  });
});
});

All you have done! we hope you have successfully implemented this jQuery counter function to count up to a target number. If you have any questions or suggestions related to this counter script, let us know by comment below.