Back to CSS Number Counter Animations Swiss SaaS Analytics CSS + JS
Share
HTML 
<div class="cnc-swiss">
  <div class="cnc-swiss-page">
    <div class="cnc-swiss-meta">
      <span class="cnc-swiss-date-range">Jan 1 — Mar 31, 2026 · Q1 Report</span>
      <div class="cnc-swiss-period-tabs">
        <div class="cnc-swiss-tab">7D</div>
        <div class="cnc-swiss-tab">1M</div>
        <div class="cnc-swiss-tab cnc-swiss-active">Q1</div>
        <div class="cnc-swiss-tab">YTD</div>
      </div>
    </div>
    <div class="cnc-swiss-hero-row">
      <div class="cnc-swiss-hero-stat">
        <span class="cnc-swiss-h-label">Monthly Recurring Revenue</span>
        <div class="cnc-swiss-h-num"><span class="cnc-swiss-h-sym">$</span><span class="cnc-num" data-target="2.84" data-decimals="2">0</span><span class="cnc-swiss-h-sym">M</span></div>
        <div class="cnc-swiss-h-delta cnc-swiss-up">↑ 18.4% <span class="cnc-swiss-h-delta-label">vs Q4 '25</span></div>
      </div>
      <div class="cnc-swiss-hero-stat">
        <span class="cnc-swiss-h-label">Active Users</span>
        <div class="cnc-swiss-h-num"><span class="cnc-num" data-target="94710">0</span></div>
        <div class="cnc-swiss-h-delta cnc-swiss-up">↑ 12.1% <span class="cnc-swiss-h-delta-label">vs Q4 '25</span></div>
      </div>
      <div class="cnc-swiss-hero-stat">
        <span class="cnc-swiss-h-label">Churn Rate</span>
        <div class="cnc-swiss-h-num"><span class="cnc-num" data-target="1.8" data-decimals="1">0</span><span class="cnc-swiss-h-sym">%</span></div>
        <div class="cnc-swiss-h-delta cnc-swiss-dn">↓ 0.3pp <span class="cnc-swiss-h-delta-label">vs Q4 '25</span></div>
      </div>
      <div class="cnc-swiss-hero-stat">
        <span class="cnc-swiss-h-label">NPS Score</span>
        <div class="cnc-swiss-h-num"><span class="cnc-num" data-target="72">0</span></div>
        <div class="cnc-swiss-h-delta cnc-swiss-up">↑ 4 pts <span class="cnc-swiss-h-delta-label">vs Q4 '25</span></div>
      </div>
    </div>
    <div class="cnc-swiss-content-row">
      <div class="cnc-swiss-left">
        <div class="cnc-swiss-box">
          <div class="cnc-swiss-box-head">
            <span class="cnc-swiss-box-title">Revenue by Month</span>
            <span class="cnc-swiss-box-meta">USD · 2025–2026</span>
          </div>
          <div class="cnc-swiss-chart-area">
            <div class="cnc-swiss-bar-wrap"><div class="cnc-swiss-cbar cnc-swiss-muted" style="height:38%"></div><span class="cnc-swiss-bar-label">Apr</span></div>
            <div class="cnc-swiss-bar-wrap"><div class="cnc-swiss-cbar cnc-swiss-muted" style="height:42%"></div><span class="cnc-swiss-bar-label">May</span></div>
            <div class="cnc-swiss-bar-wrap"><div class="cnc-swiss-cbar cnc-swiss-muted" style="height:45%"></div><span class="cnc-swiss-bar-label">Jun</span></div>
            <div class="cnc-swiss-bar-wrap"><div class="cnc-swiss-cbar cnc-swiss-muted" style="height:51%"></div><span class="cnc-swiss-bar-label">Jul</span></div>
            <div class="cnc-swiss-bar-wrap"><div class="cnc-swiss-cbar cnc-swiss-muted" style="height:47%"></div><span class="cnc-swiss-bar-label">Aug</span></div>
            <div class="cnc-swiss-bar-wrap"><div class="cnc-swiss-cbar cnc-swiss-muted" style="height:55%"></div><span class="cnc-swiss-bar-label">Sep</span></div>
            <div class="cnc-swiss-bar-wrap"><div class="cnc-swiss-cbar cnc-swiss-muted" style="height:62%"></div><span class="cnc-swiss-bar-label">Oct</span></div>
            <div class="cnc-swiss-bar-wrap"><div class="cnc-swiss-cbar cnc-swiss-muted" style="height:58%"></div><span class="cnc-swiss-bar-label">Nov</span></div>
            <div class="cnc-swiss-bar-wrap"><div class="cnc-swiss-cbar cnc-swiss-muted" style="height:68%"></div><span class="cnc-swiss-bar-label">Dec</span></div>
            <div class="cnc-swiss-bar-wrap"><div class="cnc-swiss-cbar cnc-swiss-accent" style="height:75%"></div><span class="cnc-swiss-bar-label">Jan</span></div>
            <div class="cnc-swiss-bar-wrap"><div class="cnc-swiss-cbar cnc-swiss-accent" style="height:82%"></div><span class="cnc-swiss-bar-label">Feb</span></div>
            <div class="cnc-swiss-bar-wrap"><div class="cnc-swiss-cbar" style="height:91%"></div><span class="cnc-swiss-bar-label">Mar</span></div>
          </div>
        </div>
        <div class="cnc-swiss-box">
          <div class="cnc-swiss-box-head">
            <span class="cnc-swiss-box-title">Acquisition Channels</span>
            <span class="cnc-swiss-box-meta">Q1 2026</span>
          </div>
          <table class="cnc-swiss-table">
            <tr>
              <td><span class="cnc-swiss-channel-dot" style="background:#111"></span>Organic Search</td>
              <td><div class="cnc-swiss-bar-mini"><div class="cnc-swiss-mini-track"><div class="cnc-swiss-mini-fill" style="width:84%; background:#111"></div></div><span>34,820</span></div></td>
              <td>36.7%</td>
            </tr>
            <tr>
              <td><span class="cnc-swiss-channel-dot" style="background:#2563eb"></span>Paid Ads</td>
              <td><div class="cnc-swiss-bar-mini"><div class="cnc-swiss-mini-track"><div class="cnc-swiss-mini-fill" style="width:62%; background:#2563eb"></div></div><span>22,190</span></div></td>
              <td>23.4%</td>
            </tr>
            <tr>
              <td><span class="cnc-swiss-channel-dot" style="background:#16a34a"></span>Referral</td>
              <td><div class="cnc-swiss-bar-mini"><div class="cnc-swiss-mini-track"><div class="cnc-swiss-mini-fill" style="width:51%; background:#16a34a"></div></div><span>18,140</span></div></td>
              <td>19.1%</td>
            </tr>
            <tr>
              <td><span class="cnc-swiss-channel-dot" style="background:#9333ea"></span>Social</td>
              <td><div class="cnc-swiss-bar-mini"><div class="cnc-swiss-mini-track"><div class="cnc-swiss-mini-fill" style="width:38%; background:#9333ea"></div></div><span>11,810</span></div></td>
              <td>12.5%</td>
            </tr>
            <tr>
              <td><span class="cnc-swiss-channel-dot" style="background:#ea580c"></span>Direct</td>
              <td><div class="cnc-swiss-bar-mini"><div class="cnc-swiss-mini-track"><div class="cnc-swiss-mini-fill" style="width:29%; background:#ea580c"></div></div><span>7,750</span></div></td>
              <td>8.2%</td>
            </tr>
          </table>
        </div>
      </div>
      <div class="cnc-swiss-right">
        <div class="cnc-swiss-box">
          <div class="cnc-swiss-box-head"><span class="cnc-swiss-box-title">Key Metrics</span></div>
          <div class="cnc-swiss-kpi-list">
            <div class="cnc-swiss-kpi-item">
              <div class="cnc-swiss-kpi-icon">⏱</div>
              <div class="cnc-swiss-kpi-text"><div class="cnc-swiss-kpi-name">Avg. Session</div><div class="cnc-swiss-kpi-sub">Per active user</div></div>
              <div class="cnc-swiss-kpi-val"><span class="cnc-num" data-target="24" data-decimals="0">0</span>m</div>
            </div>
            <div class="cnc-swiss-kpi-item">
              <div class="cnc-swiss-kpi-icon">💰</div>
              <div class="cnc-swiss-kpi-text"><div class="cnc-swiss-kpi-name">ARPU</div><div class="cnc-swiss-kpi-sub">Monthly average</div></div>
              <div class="cnc-swiss-kpi-val">$<span class="cnc-num" data-target="29.90" data-decimals="2">0</span></div>
            </div>
            <div class="cnc-swiss-kpi-item">
              <div class="cnc-swiss-kpi-icon">📈</div>
              <div class="cnc-swiss-kpi-text"><div class="cnc-swiss-kpi-name">LTV</div><div class="cnc-swiss-kpi-sub">Avg customer</div></div>
              <div class="cnc-swiss-kpi-val">$<span class="cnc-num" data-target="1240">0</span></div>
            </div>
            <div class="cnc-swiss-kpi-item">
              <div class="cnc-swiss-kpi-icon">⚡</div>
              <div class="cnc-swiss-kpi-text"><div class="cnc-swiss-kpi-name">CAC</div><div class="cnc-swiss-kpi-sub">Blended</div></div>
              <div class="cnc-swiss-kpi-val">$<span class="cnc-num" data-target="148">0</span></div>
            </div>
            <div class="cnc-swiss-kpi-item">
              <div class="cnc-swiss-kpi-icon">🎯</div>
              <div class="cnc-swiss-kpi-text"><div class="cnc-swiss-kpi-name">Conv. Rate</div><div class="cnc-swiss-kpi-sub">Trial to paid</div></div>
              <div class="cnc-swiss-kpi-val"><span class="cnc-num" data-target="31.4" data-decimals="1">0</span>%</div>
            </div>
          </div>
        </div>
        <div class="cnc-swiss-box" style="padding:24px;">
          <div class="cnc-swiss-box-title" style="margin-bottom:20px;">Retention Cohorts</div>
          <div style="display:flex; gap:16px; align-items:center;">
            <svg width="90" height="90" viewBox="0 0 90 90" style="transform:rotate(-90deg); flex-shrink:0;">
              <circle cx="45" cy="45" r="35" fill="none" stroke="#e8e8e4" stroke-width="8"/>
              <circle cx="45" cy="45" r="35" fill="none" stroke="#111" stroke-width="8"
                stroke-linecap="round"
                stroke-dasharray="220"
                stroke-dashoffset="220"
                class="cnc-swiss-ring-main"/>
            </svg>
            <div>
              <div style="font-family:'Instrument Serif',serif; font-size:32px; letter-spacing:-1px; line-height:1;"><span class="cnc-num" data-target="78">0</span>%</div>
              <div style="font-size:11px; color:#888; margin-top:4px;">D30 Retention</div>
              <div style="font-size:11px; color:#16a34a; margin-top:8px;">↑ 5pp vs benchmark</div>
            </div>
          </div>
          <div style="margin-top:16px; display:flex; flex-direction:column; gap:8px;">
            <div style="display:flex; justify-content:space-between; font-size:11px; color:#888;">
              <span>D7</span><div style="flex:1; height:3px; background:#e8e8e4; margin:auto 12px; border-radius:2px; overflow:hidden;"><div class="cnc-swiss-cohort-bar" style="background:#111;width:91%; animation-delay:0.7s;"></div></div><span>91%</span>
            </div>
            <div style="display:flex; justify-content:space-between; font-size:11px; color:#888;">
              <span>D30</span><div style="flex:1; height:3px; background:#e8e8e4; margin:auto 12px; border-radius:2px; overflow:hidden;"><div class="cnc-swiss-cohort-bar" style="background:#111;width:78%; animation-delay:0.9s;"></div></div><span>78%</span>
            </div>
            <div style="display:flex; justify-content:space-between; font-size:11px; color:#888;">
              <span>D90</span><div style="flex:1; height:3px; background:#e8e8e4; margin:auto 12px; border-radius:2px; overflow:hidden;"><div class="cnc-swiss-cohort-bar" style="background:#111;width:61%; animation-delay:1.1s;"></div></div><span>61%</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
CSS 
.cnc-swiss {
  --swiss-bg: #f7f7f5;
  --swiss-ink: #111;
  --swiss-mid: #888;
  --swiss-faint: #e8e8e4;
  --swiss-blue: #2563eb;
  display: flex; align-items: center; justify-content: center;
  padding: 60px 32px;
  background: var(--swiss-bg);
  font-family: 'Instrument Sans', sans-serif;
  color: var(--swiss-ink);
}
.cnc-swiss-page { width: 1000px; }
.cnc-swiss-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 48px; padding-bottom: 20px;
  border-bottom: 1px solid var(--swiss-faint);
}
.cnc-swiss-date-range {
  font-size: 12px; color: var(--swiss-mid); letter-spacing: 0.5px;
}
.cnc-swiss-period-tabs {
  display: flex; gap: 2px;
  background: var(--swiss-faint);
  padding: 3px; border-radius: 6px;
}
.cnc-swiss-tab {
  font-size: 11px; padding: 4px 12px;
  border-radius: 4px; cursor: pointer;
  color: var(--swiss-mid); letter-spacing: 0.5px;
  transition: background 0.15s, color 0.15s;
}
.cnc-swiss-tab.cnc-swiss-active {
  background: #fff; color: var(--swiss-ink);
  font-weight: 500; box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.cnc-swiss-hero-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--swiss-faint);
  margin-bottom: 24px;
}
.cnc-swiss-hero-stat {
  padding: 32px 28px;
  border-right: 1px solid var(--swiss-faint);
  position: relative;
  transition: background 0.15s;
  opacity: 0; animation: cnc-swiss-fadeIn 0.5s ease forwards;
}
.cnc-swiss-hero-stat:last-child { border-right: none; }
.cnc-swiss-hero-stat:hover { background: #fff; }
.cnc-swiss-hero-stat::after {
  content: ''; position: absolute;
  bottom: 0; left: 28px; right: 28px;
  height: 1px; background: var(--swiss-ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s ease;
}
.cnc-swiss-hero-stat:hover::after { transform: scaleX(1); }
.cnc-swiss-hero-stat:nth-child(1) { animation-delay: 0.0s; }
.cnc-swiss-hero-stat:nth-child(2) { animation-delay: 0.08s; }
.cnc-swiss-hero-stat:nth-child(3) { animation-delay: 0.16s; }
.cnc-swiss-hero-stat:nth-child(4) { animation-delay: 0.24s; }
@keyframes cnc-swiss-fadeIn { to { opacity: 1; } }
.cnc-swiss-h-label {
  font-size: 11px; color: var(--swiss-mid);
  letter-spacing: 0.5px; margin-bottom: 12px; display: block;
}
.cnc-swiss-h-num {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(36px, 4vw, 56px);
  color: var(--swiss-ink); line-height: 1; letter-spacing: -1.5px;
  display: flex; align-items: baseline; gap: 4px;
}
.cnc-swiss-h-sym {
  font-size: 0.45em;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400; color: var(--swiss-mid); letter-spacing: 0;
}
.cnc-swiss-h-delta {
  display: flex; align-items: center; gap: 4px;
  margin-top: 10px; font-size: 12px; font-weight: 500;
}
.cnc-swiss-up { color: #16a34a; }
.cnc-swiss-dn { color: #dc2626; }
.cnc-swiss-h-delta-label {
  font-size: 11px; color: var(--swiss-mid);
  font-weight: 400; margin-left: 2px;
}
.cnc-swiss-content-row {
  display: grid; grid-template-columns: 1fr 320px; gap: 24px;
}
.cnc-swiss-left { display: flex; flex-direction: column; gap: 24px; }
.cnc-swiss-right { display: flex; flex-direction: column; gap: 24px; }
.cnc-swiss-box {
  border: 1px solid var(--swiss-faint);
  background: #fff;
  opacity: 0; animation: cnc-swiss-fadeIn 0.5s ease forwards;
}
.cnc-swiss-left .cnc-swiss-box:nth-child(1) { animation-delay: 0.3s; }
.cnc-swiss-left .cnc-swiss-box:nth-child(2) { animation-delay: 0.4s; }
.cnc-swiss-right .cnc-swiss-box:nth-child(1) { animation-delay: 0.35s; }
.cnc-swiss-right .cnc-swiss-box:nth-child(2) { animation-delay: 0.45s; }
.cnc-swiss-box-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--swiss-faint);
  display: flex; align-items: center; justify-content: space-between;
}
.cnc-swiss-box-title {
  font-size: 12px; font-weight: 500;
  color: var(--swiss-ink); letter-spacing: 0.3px;
}
.cnc-swiss-box-meta { font-size: 11px; color: var(--swiss-mid); }
.cnc-swiss-chart-area {
  padding: 24px 20px 16px;
  display: flex; align-items: flex-end; gap: 6px;
  height: 180px; position: relative;
}
.cnc-swiss-chart-area::before {
  content: ''; position: absolute;
  left: 20px; right: 20px; top: 24px; bottom: 32px;
  background-image: repeating-linear-gradient(
    0deg, transparent, transparent calc(25% - 1px),
    var(--swiss-faint) calc(25%), var(--swiss-faint) 25%);
}
.cnc-swiss-bar-wrap {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  gap: 6px; height: 100%; position: relative; z-index: 1;
}
.cnc-swiss-cbar {
  width: 100%; background: var(--swiss-ink);
  border-radius: 2px 2px 0 0;
  transform: scaleY(0); transform-origin: bottom;
  animation: cnc-swiss-barUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  min-height: 2px;
}
.cnc-swiss-muted { background: var(--swiss-faint); }
.cnc-swiss-accent { background: var(--swiss-blue); }
.cnc-swiss-bar-label {
  font-size: 9px; color: var(--swiss-mid); letter-spacing: 0.5px;
}
.cnc-swiss-bar-wrap:nth-child(1) .cnc-swiss-cbar { animation-delay: 0.05s; }
.cnc-swiss-bar-wrap:nth-child(2) .cnc-swiss-cbar { animation-delay: 0.1s; }
.cnc-swiss-bar-wrap:nth-child(3) .cnc-swiss-cbar { animation-delay: 0.15s; }
.cnc-swiss-bar-wrap:nth-child(4) .cnc-swiss-cbar { animation-delay: 0.2s; }
.cnc-swiss-bar-wrap:nth-child(5) .cnc-swiss-cbar { animation-delay: 0.25s; }
.cnc-swiss-bar-wrap:nth-child(6) .cnc-swiss-cbar { animation-delay: 0.3s; }
.cnc-swiss-bar-wrap:nth-child(7) .cnc-swiss-cbar { animation-delay: 0.35s; }
.cnc-swiss-bar-wrap:nth-child(8) .cnc-swiss-cbar { animation-delay: 0.4s; }
.cnc-swiss-bar-wrap:nth-child(9) .cnc-swiss-cbar { animation-delay: 0.45s; }
.cnc-swiss-bar-wrap:nth-child(10) .cnc-swiss-cbar { animation-delay: 0.5s; }
.cnc-swiss-bar-wrap:nth-child(11) .cnc-swiss-cbar { animation-delay: 0.55s; }
.cnc-swiss-bar-wrap:nth-child(12) .cnc-swiss-cbar { animation-delay: 0.6s; }
@keyframes cnc-swiss-barUp { to { transform: scaleY(1); } }
.cnc-swiss-table { width: 100%; border-collapse: collapse; }
.cnc-swiss-table tr { border-bottom: 1px solid var(--swiss-faint); }
.cnc-swiss-table tr:last-child { border-bottom: none; }
.cnc-swiss-table td {
  padding: 12px 20px; font-size: 12px; vertical-align: middle;
}
.cnc-swiss-table td:last-child { text-align: right; font-weight: 500; }
.cnc-swiss-channel-dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; margin-right: 8px;
}
.cnc-swiss-bar-mini { display: flex; align-items: center; gap: 8px; }
.cnc-swiss-mini-track {
  width: 80px; height: 3px;
  background: var(--swiss-faint); border-radius: 2px; overflow: hidden;
}
.cnc-swiss-mini-fill {
  height: 100%; border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  animation: cnc-swiss-barXup 1s ease forwards;
}
.cnc-swiss-table tr:nth-child(1) .cnc-swiss-mini-fill { animation-delay: 0.6s; }
.cnc-swiss-table tr:nth-child(2) .cnc-swiss-mini-fill { animation-delay: 0.75s; }
.cnc-swiss-table tr:nth-child(3) .cnc-swiss-mini-fill { animation-delay: 0.9s; }
.cnc-swiss-table tr:nth-child(4) .cnc-swiss-mini-fill { animation-delay: 1.05s; }
.cnc-swiss-table tr:nth-child(5) .cnc-swiss-mini-fill { animation-delay: 1.2s; }
@keyframes cnc-swiss-barXup { to { transform: scaleX(1); } }
.cnc-swiss-kpi-list { padding: 4px 0; }
.cnc-swiss-kpi-item {
  display: flex; align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--swiss-faint); gap: 12px;
}
.cnc-swiss-kpi-item:last-child { border-bottom: none; }
.cnc-swiss-kpi-icon {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  background: var(--swiss-faint);
  border-radius: 6px; flex-shrink: 0;
}
.cnc-swiss-kpi-text { flex: 1; }
.cnc-swiss-kpi-name { font-size: 12px; font-weight: 500; }
.cnc-swiss-kpi-sub { font-size: 11px; color: var(--swiss-mid); margin-top: 1px; }
.cnc-swiss-kpi-val {
  font-family: 'Instrument Serif', serif;
  font-size: 22px; letter-spacing: -0.5px;
}
.cnc-swiss-ring-main {
  transition: stroke-dashoffset 1.5s ease 0.6s;
}
.cnc-swiss-cohort-bar {
  height: 100%; transform: scaleX(0); transform-origin: left;
  animation: cnc-swiss-barXup 1s ease forwards;
}
@media (prefers-reduced-motion: reduce) {
  .cnc-swiss-hero-stat, .cnc-swiss-box, .cnc-swiss-cbar,
  .cnc-swiss-mini-fill, .cnc-swiss-cohort-bar { animation: none; }
  .cnc-swiss-hero-stat, .cnc-swiss-box { opacity: 1; }
  .cnc-swiss-cbar { transform: scaleY(1); }
  .cnc-swiss-mini-fill, .cnc-swiss-cohort-bar { transform: scaleX(1); }
}
JS 
(function () {
  function ease(t) { return 1 - Math.pow(1 - t, 3); }
  var root = document.querySelector('.cnc-swiss');
  if (!root) return;
  root.querySelectorAll('.cnc-num[data-target]').forEach(function (el) {
    var target = parseFloat(el.dataset.target);
    var decimals = parseInt(el.dataset.decimals || 0, 10);
    var duration = 1600;
    setTimeout(function () {
      var start = performance.now();
      function tick(now) {
        var t = Math.min((now - start) / duration, 1);
        var val = ease(t) * target;
        el.textContent = decimals > 0
          ? val.toFixed(decimals)
          : Math.round(val).toLocaleString();
        if (t < 1) requestAnimationFrame(tick);
      }
      requestAnimationFrame(tick);
    }, 300);
  });
  setTimeout(function () {
    var ring = root.querySelector('.cnc-swiss-ring-main');
    if (ring) ring.style.strokeDashoffset = 220 * (1 - 0.78);
  }, 600);
})();