Animated Counter JavaScript

In this article, you are going to learn how to create an animated counter using JavaScript with description and source code.

You would have already seen animated numbers counters on some fancy websites. These are numbers counters that instead of directly showing the number, are animated and show the number in a smooth manner as they increase.

Shown below is a simple example of an animated counter.

We are going to create a similar animated counter step by step using JavaScript.

Here is what our counter will look like:

animated counter javascript — Animated Counter Using JavaScript

Test the app

Creating Animated Counter

To create this number counter project we will use HTML, CSS, and JavaScript. HTML gives structure to our project and CSS gives style and JavaScript gives the functionality.

For a better presentation and showing 1 use case we will create social media presence counter. That will show a counter for Facebook likes, Twitter followers, Youtube subscribers, and LinkedIn connections as shown above.

Creating HTML Structure

First, the counter will have a header for a nice look, with some text.

<header class="heading">
  <h1>Our Social Presence</h1>
</header>

After heading our main application will be start.

Use <main> tag and create the main container of the application by giving it class counter-container.

<main class="counter-container">

</main>

Now, use the <div> element to create a container for the social media presence counter.

Within this element, create 3 elements:

Social Icon - This section contains the social icon for social media applications created using font-awesome.
Counter name - This section contains the what counter is for, like Facebook likes, Twitter followers, Youtube subscribers, and LinkedIn connections.
Counter value - It is actual number that is shown on the counter.

<div class="social">
  <div class="social-icon">
    <i class="fab fa-youtube"></i>
  </div>
  <p>Subscribers</p>
  <h3 class="counter" data-count="21035">0</h3>
</div>

Now repeat the above code 3 more times for Facebook, Twitter, and LinkedIn.

For fonts to work, connect your HTML with the font-awesome library by pasting the following code in your head of your HTML file:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

Complete HTML Code

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript Animated Counter</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@700&display=swap" rel="stylesheet">
</head>

<body>
  <header class="heading">
    <h1>Our Social Presence</h1>
  </header>
  <main class="counter-container">
    <div class="social">
      <div class="social-icon">
        <i class="fab fa-youtube"></i>
      </div>
      <p>Subscribers</p>
      <h3 class="counter" data-count="21035">0</h3>
    </div>
    <div class="social">
      <div class="social-icon">
        <i class="fab fa-twitter"></i>
      </div>
      <p>Followers</p>
      <h3 class="counter" data-count="8025">0</h3>
    </div>
    <div class="social">
      <div class="social-icon">
        <i class="fab fa-facebook"></i>
      </div>
      <p>Likes</p>
      <h3 class="counter" data-count="125312">0</h3>
    </div>
    <div class="social">
      <div class="social-icon">
        <i class="fab fa-linkedin"></i>
      </div>
      <p>Connections</p>
      <h3 class="counter" data-count="625">0</h3>
    </div>
  </main>
</body>

</html>

Styling the Counter

Styling of application totally depends on your thoughts, needs, and imagination. You can style the application in your own way.

Our styling is very simple and easy to create. Here is the CSS code for the application.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.heading {
  text-align: center;
  font-size: 1.6rem;
  padding: 3rem 0;
  background: #ffe99f;
  font-family: sans-serif;
}

.counter-container {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
  padding: 2rem 0;
}

.social {
  width: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 1rem 0;
}

.social-icon {
  font-size: 2rem;
  color: #fff;
  border-radius: 50%;
}

.social-icon i {
  padding: 0.7rem;
  border-radius: 50%;
}

.fa-youtube {
  background: #c4302b;
}

.fa-twitter {
  background: #00acee;
}

.fa-facebook {
  background: #3b5998;
}

.fa-linkedin {
  background: #0077b5;
}

.social p {
  font-size: 1.5rem;
  font-family: sans-serif;
  padding: 10px 0;
}

.social h3 {
  font-size: 2.5rem;
  font-weight: 700;
  font-family: "Nunito", sans-serif;
}

@media screen and (max-width: 768px) {
  .heading {
    font-size: 1.2rem;
  }

  .counter-container {
    flex-direction: column;
  }
}

JavaScript Code for the Application

Now we will write JavaScript that will make the application work.

First, select all the counter elements and store them in a variable using the querySelectorAll method.

It will select all the elements with the class counter and store them in a variable as a node list.

// select all counter elements
const counters = document.querySelectorAll('.counter');

As we have selected all the counter elements we will iterate through them and call function updateCounte for each of them.

// iterate through all the counter elements
counters.forEach(counter => {
  updateCounter(counter);
});

Let's create the function updateCounter.

The function updateCounter will do the following things:

Get the target value of the counter stored as a data-count attribute.
Get the current value of the counter.
Starting from 0, if we increase the current value by 1, it will take a long time to reach the target value for larger numbers. So create a variable increment that will increase the counter by 100th part of the remaining target value every time the function is called. i.e increment = (target - current) / 100.
Now, check if the current value is less than the target value and increment > 0. If yes, then increment the current value by increment and call the function again.
If the increment becomes 0 then simply set the current value to the target value.

Here is the code for the function updateCounter.

// updateCounter function
function updateCount() {
  const target = +counter.getAttribute('data-count');
  const count = +counter.innerHTML;

  const inc = Math.floor((target - count) / 100);

  if (count < target && inc > 0) {
    counter.innerHTML = (count + inc);
    // repeat the function
    setTimeout(updateCount,1);
  }
  // if the count not equal to target, then add remaining count
  else {
    counter.innerHTML = target;
  }
}

Complete Code For Animated Counter JavaScript

The complete code for the counter application is given below.

Example

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript Animated Counter</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@700&display=swap" rel="stylesheet">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    .heading {
      text-align: center;
      font-size: 2.5rem;
      padding: 3rem 0;
      background: #ffe99f;
      font-family: sans-serif;
    }

    .counter-container {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      flex-wrap: wrap;
      padding: 2rem 0;
    }

    .social {
      width: 20%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      padding: 1rem 0;
    }

    .social-icon {
      font-size: 2rem;
      color: #fff;
      border-radius: 50%;
    }

    .social-icon i {
      padding: 0.7rem;
      border-radius: 50%;
    }

    .fa-youtube {
      background: #c4302b;
    }

    .fa-twitter {
      background: #00acee;
    }

    .fa-facebook {
      background: #3b5998;
    }

    .fa-linkedin {
      background: #0077b5;
    }

    .social p {
      font-size: 1.5rem;
      font-family: sans-serif;
      padding: 10px 0;
    }

    .social h3 {
      font-size: 2.5rem;
      font-weight: 700;
      font-family: "Nunito", sans-serif;
    }

    @media screen and (max-width: 768px) {
      .heading {
        font-size: 1.5rem;
      }

      .counter-container {
        flex-direction: column;
      }
    }
  </style>
</head>

<body>
  <header class="heading">
    <h1>Our Social Presence</h1>
  </header>
  <main class="counter-container">
    <div class="social">
      <div class="social-icon">
        <i class="fab fa-youtube"></i>
      </div>
      <p>Subscribers</p>
      <h3 class="counter" data-count="21035">0</h3>
    </div>
    <div class="social">
      <div class="social-icon">
        <i class="fab fa-twitter"></i>
      </div>
      <p>Followers</p>
      <h3 class="counter" data-count="8025">0</h3>
    </div>
    <div class="social">
      <div class="social-icon">
        <i class="fab fa-facebook"></i>
      </div>
      <p>Likes</p>
      <h3 class="counter" data-count="125312">0</h3>
    </div>
    <div class="social">
      <div class="social-icon">
        <i class="fab fa-linkedin"></i>
      </div>
      <p>Connections</p>
      <h3 class="counter" data-count="625">0</h3>
    </div>
  </main>

  <script>
    // select the element
    const counters = document.querySelectorAll('.counter');

    // iterate through all the counter elements
    counters.forEach(counter => {
      // function to increment the counter
      function updateCount() {
        const target = +counter.getAttribute('data-count');
        const count = +counter.innerHTML;

        const inc = Math.floor((target - count) / 100);

        if (count < target && inc > 0) {
          counter.innerHTML = (count + inc);
          // repeat the function
          setTimeout(updateCount, 1);
        }
        // if the count not equal to target, then add remaining count
        else {
          counter.innerHTML = target;
        }
      }
      updateCount();
    });
  </script>
</body>

</html>

Run Code

Conclusion

The animated counter improves the user's interaction and also looks more modern and clean. You can now easily add an animated counter to your website or create your own animated counter depending on the learning from this tutorial.