Data & Feedback · Intermediate

CountUp.js Stat Counters

Animated stat counters with separators, decimals and prefixes/suffixes, powered by CountUp.js.

Requires CountUp.js. Add the CDN tag below to your page (styles in <head>, scripts before </body>). The downloaded file already includes it.

<script src="https://cdn.jsdelivr.net/npm/countup.js@2.8.0/dist/countUp.umd.js"></script>

<div class="cu-row">
  <div class="cu"><span id="c1">0</span><label>Users</label></div>
  <div class="cu"><span id="c2">0</span><label>Revenue</label></div>
  <div class="cu"><span id="c3">0</span><label>Countries</label></div>
</div>
<button class="cu-btn" id="cuBtn">Run counters</button>

body{background:#0d1426;flex-direction:column;gap:24px}
.cu-row{display:flex;gap:18px}
.cu{background:#141d33;border-radius:16px;padding:24px 28px;text-align:center;min-width:120px}
.cu span{display:block;font:800 34px/1 system-ui,sans-serif;background:linear-gradient(135deg,#ff7a18,#ff477e);-webkit-background-clip:text;background-clip:text;color:transparent}
.cu label{font-size:12px;color:#8a93ad;text-transform:uppercase;letter-spacing:.05em;margin-top:6px;display:block}
.cu-btn{font:600 14px/1 system-ui,sans-serif;color:#fff;background:#ff477e;border:0;border-radius:10px;padding:11px 24px;cursor:pointer}

function run(){
  new countUp.CountUp('c1',48213,{separator:','}).start();
  new countUp.CountUp('c2',1.2,{decimalPlaces:1,prefix:'$',suffix:'M'}).start();
  new countUp.CountUp('c3',57).start();
}
document.getElementById('cuBtn').onclick=run;run();

Free to use.This component uses CountUp.js (linked above). Copy any file, or download a ready-to-open .html page with the CDN links already included.