Animated counter using HTML CSS and Javascript

Leave a Comment / HTML / By Code Indoor Team

In this post, we are going to create an animated counter using HTML, CSS, and Javascript. In this article, we are going to animate the numbers from 0 to the desired number when the page loads.

animated counter

As you see in the video we are going to animate the numbers when the page loads, we are using javascript to increase the number count.

HTML Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Animated Stat Counter</title>
  </head>
  <body>
    <div class="container">
      <div class="stats-section">
        <div class="stats-card">
          <div class="icon-circle">
            <img class="icon" src="./images/chart-icon.svg" alt="" />
          </div>
          <p class="title" id="value" data-target="1200">0</p>
          <p class="label">Sqft Area Constructed</p>
        </div>
      </div>
    </div>

    <script src="./script.js"></script>
  </body>
</html>

In the above HTML code, we are creating a card with an icon, description, and counter value.

CSS Code

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap");
html,
body {
font-family: "DM Sans", sans-serif;
}

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

.container {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #6764ef;
}

.stats-section {
width: 15vw;
display: flex;
align-items: center;
background-color: #fff;
border-radius: 0.2rem;
box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.09);
}

.stats-card {
display: flex;
flex: 100%;
flex-direction: column;
align-items: center;
padding: 1.5rem;
}

.icon-circle {
width: 2.7rem;
height: 2.7rem;
border-radius: 2rem;
background-color: #6764ef;
display: flex;
align-items: center;
justify-content: center;
}

.icon {
width: 1.3rem;
height: 1.3rem;
}

.title {
font-size: 1.5rem;
font-weight: 600;
color: #2c2727;
margin-top: 0.3rem;
}

.label {
font-size: 0.8rem;
color: #151414;
margin-top: 0.1rem;
text-align: center;
}

Javascript Code

const counters = document.querySelectorAll("#value");
const animationSpeed = 300;

counters.forEach((count) => {
  const incrementCount = () => {
    const finalValue = Number(count.getAttribute("data-target"));
    const currentCount = Number(count.innerText);

    const incrementValue = finalValue / animationSpeed;

    if (currentCount < finalValue) {
      count.innerText = Math.ceil(currentCount + incrementValue);
      setTimeout(incrementCount, 1);
    } else {
      currentCount.innerText = finalValue;
    }
  };

  incrementCount();
});

In the above javascript code, we are accessing both the target value and the initial value of the counter, we are incrementing the current count with the value we get by adding the current count and increment value and we are displaying the updated value. Like this, we have implemented the animated counter with HTML, CSS and Javascript.

Also, Check this

Leave a Comment Cancel Reply