Stats Card — Free HTML CSS JS Count-Up Snippet

Stats cards display key metrics — revenue, user count, conversion rate, active sessions. They appear on every analytics dashboard, SaaS overview page, and marketing landing section. The difference between a static number and an animated count-up is significant: the animation draws the eye to the metric at the moment it enters the viewport, making the number feel earned rather than just displayed.

The IntersectionObserver trigger

Each .value element has a data-target attribute with the final number. The JavaScript creates an IntersectionObserver for each element. When the element enters the viewport (e.isIntersecting), animateValue(el) is called and the observer disconnects — the animation runs once and does not re-trigger on scroll back.

The count-up animation

animateValue(el) uses performance.now() as the animation start time and requestAnimationFrame for smooth updates. Each frame calculates progress p = Math.min((now - start) / 1200, 1) — a value from 0 to 1 over 1200ms. The easing function 1 - Math.pow(1 - p, 3) is a cubic ease-out: it starts fast and decelerates near the final value, like a car slowing to a stop. The eased progress multiplied by the target gives the current display value. For decimal targets, toFixed(1) is used; for integers, toLocaleString() adds commas.

Change indicators

Each card has a .change span with .up (green) or .down (red) and a delta value. The up/down classes control colour only — the emoji arrow is in the HTML. This makes it straightforward to wire real data: compare current vs previous period and set the class and delta dynamically.

Coloured icon backgrounds

Each card has an icon in a square with a coloured rounded background (.icon) tinted to match the metric type — purple for revenue, blue for users, green for conversion. Update the background and color inline styles on each .icon div to match your own metric categories.

The IntersectionObserver single-fire pattern

The stats card uses IntersectionObserver with threshold: 0.5. When 50% of the card enters the viewport, the count-up animation fires. Inside the callback, obs.disconnect() immediately unregisters the observer — the animation plays exactly once per page load, never re-triggering when the user scrolls back. This is the correct pattern for "animate once on enter" — not "animate every time on enter/exit".

The activity heatmap grid

The contribution heatmap generates a grid of day cells using JavaScript: for (let week = 0; week < 52; week++) { for (let day = 0; day < 7; day++) { ... } }. Each cell gets a colour intensity class based on its activity value (0–4). The CSS uses different background opacity levels per intensity class. The grid uses display: grid; grid-template-columns: repeat(52, auto); gap: 2px — 52 columns for 52 weeks.

SVG progress rings

The stats card uses multiple SVG progress rings at different sizes. Each ring has its own CIRCUMFERENCE (2πr) and target dashoffset. The rings animate simultaneously when the card enters the viewport — all starting from their empty state (dashoffset = CIRCUMFERENCE) and transitioning to their target value over 1s.