<div class="stats-container">
  <div class="stat-box">
    <div class="count" data-target="1500">0</div>
    <p>Happy Clients</p>
  </div>
  <div class="stat-box">
    <div class="count" data-target="350">0</div>
    <p>Projects Done</p>
  </div>
  <div class="stat-box">
    <div class="count" data-target="24">0</div>
    <p>Awards Won</p>
  </div>
</div>

.stats-container {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  display: flex;
  gap: 40px;
  justify-content: center;
  padding: 40px;
  background: #f9fafb;
  border-radius: 16px;
}
.stat-box {
  text-align: center;
}
.count {
  font-size: 3rem;
  font-weight: 800;
  color: #2563eb;
  margin-bottom: 5px;
}
.stat-box p {
  font-size: 1rem;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
}

const counters = document.querySelectorAll(".count");

counters.forEach((counter) => {
  const updateCount = () => {
    const target = +counter.getAttribute("data-target");
    const count = +counter.innerText;
    const increment = target / 100;

    if (count < target) {
      counter.innerText = Math.ceil(count + increment);
      setTimeout(updateCount, 20);
    } else {
      counter.innerText = target;
    }
  };
  updateCount();
});

Back to Snippets

Animated Number Counter JS

Display impressive statistics with this animated counter. The numbers roll up smoothly from zero to the target value when the page loads, which adds dynamic movement to your landing page metrics.

334

#javascript

#css

#counter

#animation

#statistics

#numbers

#landing page

#ui

/HTML *CSS ()JS Output Live Updates

Animated Number Counter JS

Share Code Snippet