4 Number & Data Effects - Live, and Fast (No Plugin)

A dry number on the page is a missed opportunity. That same number, when it climbs before your eyes or fills a bar, turns from a figure into a small moment that sticks. It is one of the simplest ways to present achievements, metrics and percentages in a way that catches the eye and builds trust.

This is the last post in the series. We’ve already seen text, images, buttons and backgrounds. And like all of them: everything is live, no plugin, on a fast page.

All effects respect the prefers-reduced-motion setting (the number shows immediately, with no climb).

Number & data effects

let start; const dur = 1400, target = 250;
requestAnimationFrame(function tick(t){
  start ??= t; const p = Math.min((t-start)/dur, 1);
  el.textContent = Math.round((1-(1-p)**2) * target);
  if (p < 1) requestAnimationFrame(tick); });

/* conic ring fills as the number climbs */
.ring { background: conic-gradient(var(--accent)
  calc(var(--val)*1%), var(--border) 0); }
// JS animates --val 0->target together with the number

.fill { width: 0; transition: width var(--dur,1.2s)
  cubic-bezier(.16,1,.3,1); }
.go .fill { width: calc(var(--val)*1%); }

.bar { height: 0; transition: height var(--dur,.9s) ease;
  transition-delay: calc(var(--i) * 90ms); }
.go .bar { height: var(--h); }

And that’s the whole series

Five categories, dozens of effects, all live and fast: text, images, buttons, backgrounds and the numbers here. All on the same principle: an impressive effect and real speed are not a contradiction.

Want a site that feels alive, premium, and still loads instantly? That is exactly what we do - let’s talk.