Count-up stats bar

Four-stat row that counts up from zero when it scrolls into view, using IntersectionObserver plus requestAnimationFrame, no animation library needed. Swap the data-target/prefix/suffix attributes per stat, keep to four items or the row gets cramped on mobile.

pattern · stripe.com stats counter animation-scrollvanilla

Get a site with blocks like this

Live preview

open in new tab ↗

<section class="sw-stats-bar" id="swStatsBar">
  <div class="sw-stat"><span class="sw-stat-value" data-target="135" data-suffix="+">0</span><span class="sw-stat-label">currencies and payment methods supported</span></div>
  <div class="sw-stat"><span class="sw-stat-value" data-target="1.9" data-decimals="1" data-prefix="$" data-suffix="tn">0</span><span class="sw-stat-label">in payments volume processed last year</span></div>
  <div class="sw-stat"><span class="sw-stat-value" data-target="99.999" data-decimals="3" data-suffix="%">0</span><span class="sw-stat-label">historical uptime</span></div>
  <div class="sw-stat"><span class="sw-stat-value" data-target="200" data-suffix="M+">0</span><span class="sw-stat-label">active subscriptions managed</span></div>
</section>

Block id: stripe-stats-counter-barvanilla · swap-content

More stats blocks

Star-rating and review-platform badge row

cal.com

Rotating project health status list

linear

Count-up number ticker

magicui

Animated circular gauge

magicui

Want the whole site, not just the block?

We ship real client sites in 3 weeks — with blocks like this one, wired to your brand.

Get my free 15-min audit Book a Discovery Call