Creating Animated Counter using HTML, CSS, and JavaScript

JavascriptWeb DevelopmentFront End Technology

In this article, we will be exploring how to create an animated counter using JavaScript and basic HTML for designing.

An animated counter can be described as a display that counts an animation starting from 0 and ending at a specific number. This is generally used by popular websites for creating websites attractive and prettier.

How to create animated counters

We will be using native HTML, CSS, and JavaScript for creating animated counters. Below is the approach on how to create one.

  • We will be defining a div tag with an ID.

  • We will add a JavaScript code to the script tag at the above div.

  • Once the script tag is added, we can add the setInterval() method to execute the update function that will increment the count value.

  • Once the count value has reached the required count, it will stop executing until the counter is cleared using the clearInterval() method.

  • We can use the setInterval() method to repeat a given function at any given time

Example 1

In the below example, we create an animated counter with the help of the setInterval() and clearInterval() method. This will update the counter when the updated() method is called. We will call the clearInterval() method to clear the counter.

# index.html

<!DOCTYPE html>
<html lang="en">
   <link href= "https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" 
      integrity="sha384giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
   <style>
      .container{
         background-color: #016064;
      }
      p{
      text-align: center;
      }
   </style>
<body onload="load()">
      <p>
      <div class="d-flex justify-content-center fs-1 fw-bold ">Welcome To Tutorials Point</div>
      <div class="d-flex justify-content-center fs-1 fw-bold "style="color: #016064;">Animation Counter</div>
      </p>
      <p>
      <div class="container">
         <div class="row">
            <div class="col-sm">
               <p id='0101' class="fs-2 text-light">0</p>
               <p class="text-light">Site visits</p>
            </div>
            <div class="col-sm">
               <p id='0102' class="fs-2 text-light">876</p>
               <p class="text-light">Members signed</p>
         </div>
         <div class="col-sm">
            <p class="fs-2 text-light"><span id='0103'>12</span>%</p>
            <p class="text-light align-content-center">Average complain rate</p>
         </div>
      </div>
   </div>
   </p>
   <script>
      function animate(obj, initVal, lastVal, duration) {
         let startTime = null;

      //get the current timestamp and assign it to the currentTime variable
      let currentTime = Date.now();

      //pass the current timestamp to the step function
      const step = (currentTime ) => {

      //if the start time is null, assign the current time to startTime
      if (!startTime) {
         startTime = currentTime ;
      }

      //calculate the value to be used in calculating the number to be displayed
      const progress = Math.min((currentTime - startTime)/ duration, 1);

      //calculate what to be displayed using the value gotten above
      obj.innerHTML = Math.floor(progress * (lastVal - initVal) + initVal);

      //checking to make sure the counter does not exceed the last value (lastVal)
      if (progress < 1) {
         window.requestAnimationFrame(step);
      } else {
            window.cancelAnimationFrame(window.requestAnimationFrame(step));
         }
      };
      //start animating
         window.requestAnimationFrame(step);
      }
      let text1 = document.getElementById('0101');
      let text2 = document.getElementById('0102');
      let text3 = document.getElementById('0103');
      const load = () => {
         animate(text1, 0, 511, 7000);
         animate(text2, 0, 232, 7000);
         animate(text3, 100, 25, 7000);
      }
   </script>
</body>
</html>

Output

raja
Updated on 26-Apr-2022 10:26:50

Advertisements