22 CSS Transition Effects 15 / 22

Number Counter Animation

Stat grid counters animating on load, live odometer incrementing every three seconds and SVG circular progress rings with stroke-dashoffset transition.

CSS + JS MIT licensed
Live Demo Open in tab

This is a full-page demo — interact inside the frame above, or open it in the playground for the full-screen experience.

Open in playground

The code

<div class="wrap">
  <div class="hero">
    <h1>Number <span>Counter</span><br>Animations</h1>
    <p>CSS-powered counters, odometers and progress rings — JavaScript drives the count, CSS handles the motion.</p>
  </div>

  <div class="stat-grid">
    <div class="stat-cell"><div class="stat-num counter-num" data-target="48200" data-suffix=""><span class="stat-num" style="color:#818cf8">0</span></div><span class="stat-suffix" style="color:#818cf8">+</span><div class="stat-label">Active Users</div><div class="stat-delta">↑ 24% this month</div></div>
    <div class="stat-cell"><div class="stat-num counter-num" data-target="99.97"><span style="color:#34d399;font-family:'Barlow Condensed';font-weight:900;font-size:clamp(3rem,7vw,5rem)">0</span><span style="color:#34d399;font-family:'Barlow Condensed';font-weight:900;font-size:clamp(1.5rem,4vw,2.5rem)">%</span></div><div class="stat-label">Uptime SLA</div><div class="stat-delta" style="--dc:rgba(52,211,153,.15);--dcc:#34d399">↑ 0.02% vs last quarter</div></div>
    <div class="stat-cell"><div class="stat-num counter-num"><span style="color:#fb923c;font-family:'Barlow Condensed';font-weight:900;font-size:clamp(3rem,7vw,5rem)">0</span><span style="color:#fb923c;font-family:'Barlow Condensed';font-weight:900;font-size:clamp(1.5rem,4vw,2.5rem)">ms</span></div><div class="stat-label">Avg. Response</div><div class="stat-delta" style="--dc:rgba(251,146,60,.15);--dcc:#fb923c">↓ 18ms faster</div></div>
    <div class="stat-cell"><div class="stat-num counter-num"><span style="color:#f472b6;font-family:'Barlow Condensed';font-weight:900;font-size:clamp(3rem,7vw,5rem)">0</span><span style="color:#f472b6;font-family:'Barlow Condensed';font-weight:900;font-size:clamp(1.5rem,4vw,2.5rem)">M</span></div><div class="stat-label">API Calls / Day</div><div class="stat-delta" style="--dc:rgba(244,114,182,.15);--dcc:#f472b6">↑ 3.2M new</div></div>
  </div>

  <div class="odometer" id="odo">
    <div>
      <span style="color:rgba(255,255,255,.2)">$</span><span id="odoNum" style="color:#818cf8;font-size:inherit">0</span><span style="color:rgba(255,255,255,.2)">.00</span>
    </div>
    <span class="odometer-label">Total transaction volume (live demo)</span>
  </div>

  <div class="circles" id="circles">
    <div class="circle-wrap">
      <svg class="circle-svg" viewBox="0 0 100 100">
        <circle class="circle-bg" cx="50" cy="50" r="45"/>
        <circle class="circle-progress" cx="50" cy="50" r="45" stroke="#818cf8" style="--pct:.82;--delay:0s"/>
        <text x="50" y="35" text-anchor="middle" class="circle-val" transform="rotate(90,50,50)" dy="4">82%</text>
        <text x="50" y="50" text-anchor="middle" class="circle-label" transform="rotate(90,50,50)" dy="4">Performance</text>
      </svg>
      <div class="circle-title">Performance</div>
    </div>
    <div class="circle-wrap">
      <svg class="circle-svg" viewBox="0 0 100 100">
        <circle class="circle-bg" cx="50" cy="50" r="45"/>
        <circle class="circle-progress" cx="50" cy="50" r="45" stroke="#34d399" style="--pct:.95;--delay:.2s"/>
        <text x="50" y="35" text-anchor="middle" class="circle-val" transform="rotate(90,50,50)" dy="4">95%</text>
        <text x="50" y="50" text-anchor="middle" class="circle-label" transform="rotate(90,50,50)" dy="4">Accessibility</text>
      </svg>
      <div class="circle-title">Accessibility</div>
    </div>
    <div class="circle-wrap">
      <svg class="circle-svg" viewBox="0 0 100 100">
        <circle class="circle-bg" cx="50" cy="50" r="45"/>
        <circle class="circle-progress" cx="50" cy="50" r="45" stroke="#fb923c" style="--pct:.68;--delay:.4s"/>
        <text x="50" y="35" text-anchor="middle" class="circle-val" transform="rotate(90,50,50)" dy="4">68%</text>
        <text x="50" y="50" text-anchor="middle" class="circle-label" transform="rotate(90,50,50)" dy="4">SEO Score</text>
      </svg>
      <div class="circle-title">SEO Score</div>
    </div>
    <div class="circle-wrap">
      <svg class="circle-svg" viewBox="0 0 100 100">
        <circle class="circle-bg" cx="50" cy="50" r="45"/>
        <circle class="circle-progress" cx="50" cy="50" r="45" stroke="#f472b6" style="--pct:.91;--delay:.6s"/>
        <text x="50" y="35" text-anchor="middle" class="circle-val" transform="rotate(90,50,50)" dy="4">91%</text>
        <text x="50" y="50" text-anchor="middle" class="circle-label" transform="rotate(90,50,50)" dy="4">Best Practices</text>
      </svg>
      <div class="circle-title">Best Practices</div>
    </div>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300;400;600;700;900&family=Barlow:wght@300;400;500&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Barlow',sans-serif;background:#050810;color:#f8fafc;min-height:100vh;padding:60px 24px}
.wrap{max-width:1200px;margin:0 auto}
.hero{text-align:center;padding-bottom:60px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:60px}
.hero h1{font-family:'Barlow Condensed';font-size:clamp(3rem,9vw,6rem);font-weight:900;letter-spacing:-.02em;text-transform:uppercase;line-height:.9;margin-bottom:16px}
.hero h1 span{color:#818cf8}
.hero p{color:#6b7280;font-size:1rem;max-width:50ch;margin:0 auto}

/* COUNTER CORE */
.counter-num{font-family:'Barlow Condensed';font-weight:900;line-height:1;display:inline-block;transition:opacity .3s}

/* STAT GRID */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.06);border-radius:16px;overflow:hidden;margin-bottom:56px}
.stat-cell{background:#0a0c14;padding:40px 32px;text-align:center;position:relative;overflow:hidden}
.stat-cell::before{content:'';position:absolute;inset:0;background:var(--glow,transparent);opacity:.06;pointer-events:none}
.stat-cell:hover::before{opacity:.12}
.stat-cell:nth-child(1){--glow:radial-gradient(circle,#818cf8,transparent 60%)}
.stat-cell:nth-child(2){--glow:radial-gradient(circle,#34d399,transparent 60%)}
.stat-cell:nth-child(3){--glow:radial-gradient(circle,#fb923c,transparent 60%)}
.stat-cell:nth-child(4){--glow:radial-gradient(circle,#f472b6,transparent 60%)}
.stat-num{font-size:clamp(3rem,7vw,5rem);color:var(--nc,#818cf8)}
.stat-suffix{font-family:'Barlow Condensed';font-size:clamp(1.5rem,4vw,2.5rem);font-weight:700;color:var(--nc,#818cf8)}
.stat-label{font-size:.8rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:#6b7280;margin-top:8px}
.stat-delta{display:inline-flex;align-items:center;gap:4px;font-size:.75rem;font-weight:600;margin-top:8px;padding:3px 8px;border-radius:20px;background:var(--dc,rgba(52,211,153,.15));color:var(--dcc,#34d399)}

/* TICKER rows */
.ticker-section{margin-bottom:56px}
.ticker-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:16px;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.ticker-row:last-child{border:0}
.ticker-name{font-weight:500;font-size:1rem}
.ticker-symbol{font-size:.78rem;color:#6b7280;font-weight:400}
.ticker-val{font-family:'Barlow Condensed';font-size:1.4rem;font-weight:700;color:var(--tv,#f8fafc)}
.ticker-chg{font-size:.8rem;font-weight:600;padding:4px 10px;border-radius:6px;background:var(--cb,rgba(52,211,153,.12));color:var(--cc,#34d399)}

/* ODOMETER style */
.odometer{font-family:'Barlow Condensed';font-size:clamp(4rem,12vw,8rem);font-weight:900;text-align:center;letter-spacing:.02em;padding:48px;background:linear-gradient(135deg,#0e1020,#12142a);border-radius:20px;margin-bottom:56px;border:1px solid rgba(255,255,255,.06);position:relative;overflow:hidden}
.odometer::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(129,140,248,.1),transparent 60%)}
.odometer-label{font-family:'Barlow';font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;color:#6b7280;display:block;margin-top:8px}
.odo-num{display:inline-block;position:relative}
.odo-col{display:inline-flex;flex-direction:column;overflow:hidden;height:1em;vertical-align:top}
.odo-col-inner{display:flex;flex-direction:column;transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.odo-digit{height:1em;display:flex;align-items:center;justify-content:center}
.od-active{color:#818cf8}
.odo-sep{color:rgba(255,255,255,.2)}

/* circular progress */
.circles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:24px;margin-bottom:56px}
.circle-wrap{text-align:center}
.circle-svg{width:120px;height:120px;transform:rotate(-90deg)}
.circle-bg{fill:none;stroke:rgba(255,255,255,.06);stroke-width:8}
.circle-progress{fill:none;stroke-width:8;stroke-linecap:round;stroke-dasharray:var(--dash,283);stroke-dashoffset:var(--off,283);transition:stroke-dashoffset 1.4s cubic-bezier(.22,1,.36,1) var(--delay,0s)}
.circle-progress.animated{stroke-dashoffset:calc(283 - 283 * var(--pct,.7))}
.circle-val{font-family:'Barlow Condensed';font-size:1.6rem;font-weight:900;fill:#f8fafc}
.circle-label{font-size:.75rem;fill:#6b7280;font-size:9px}
.circle-title{margin-top:12px;font-size:.82rem;font-weight:500;color:#9ca3af}

@media (prefers-reduced-motion:reduce){.counter-num,.circle-progress,.odo-col-inner{transition:none !important}}
// Animate stat numbers
function animateCounter(el, target, decimals, duration){
  let start = 0, startTime = null;
  const step = timestamp => {
    if(!startTime) startTime = timestamp;
    const p = Math.min((timestamp - startTime) / duration, 1);
    const ease = 1 - Math.pow(1-p, 3);
    const val = ease * target;
    el.textContent = decimals ? val.toFixed(2) : Math.floor(val).toLocaleString();
    if(p < 1) requestAnimationFrame(step);
  };
  requestAnimationFrame(step);
}

const statCells = document.querySelectorAll('.stat-cell');
const targets = [[48200, 0], [99.97, 2], [12, 0], [4.8, 0]];
const labels = [null, null, null, null];
const statNums = document.querySelectorAll('.stat-cell span[style*="font-family"]');

// Count up on load with slight stagger
const pairs = [
  {el: statNums[0], val: 48200, dec: 0},
  {el: statNums[1], val: 99.97, dec: 2},
  {el: statNums[2], val: 12, dec: 0},
  {el: statNums[3], val: 4.8, dec: 1},
];
pairs.forEach((p, i) => {
  if(p.el) setTimeout(() => animateCounter(p.el, p.val, p.dec, 1800), i * 200);
});

// Odometer random increment
let odo = 1284739;
const odoEl = document.getElementById('odoNum');
animateCounter(odoEl, odo, 0, 2000);
setInterval(() => {
  odo += Math.floor(Math.random() * 8000 + 2000);
  animateCounter(odoEl, odo, 0, 800);
}, 3000);

// Trigger circle animations on load
setTimeout(() => {
  document.querySelectorAll('.circle-progress').forEach(c => c.classList.add('animated'));
}, 300);

More from 22 CSS Transition Effects

Text Reveal AnimationImage Zoom Hover TransitionBackground Color TransitionBorder Animation TransitionNavigation Hover TransitionUnderline Animation HoverGlassmorphism Hover TransitionSlide-In Animation on ScrollFade In Fade Out TransitionLoading Skeleton TransitionModal Open Close TransitionPage Transition Effect
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →