Funnel Conversion Steps — Free Drop-Off Funnel HTML CSS JS

Every product with a signup flow, checkout, or onboarding sequence eventually needs to answer one question: where do people actually leave? A funnel chart answers it visually, showing each stage as a bar sized to its share of the starting cohort, with the percentage lost between consecutive stages called out explicitly. This snippet builds that funnel in plain HTML, CSS, and vanilla JavaScript from a single ordered array of stages, no chart library involved.

Bars sized by count, not by an external scale

Each stage's bar width is computed as a percentage of the *first* stage's count (stage.count / maxCount), clamped to a 6% minimum so even a heavily-dropped-off final stage stays visible and readable. Because every bar is measured against the same reference point, the shrinking width tells an honest visual story — the funnel narrows exactly as fast as users actually leave, and you can see the “gap” between an initial burst of traffic and the trickle that converts.

Drop-off, calculated between neighbors, not against the top

Between every pair of consecutive stages, render() inserts a callout showing what fraction of the *previous* stage's count was lost before the next stage (1 - next.count / stage.count) * 100. This is the number product and growth teams actually act on — a 78% drop between "Activated feature" and "Added payment" points at a specific step to fix, which a single overall conversion number would hide entirely. Drops under 40% render in amber rather than red, so the callouts read as a heat scale rather than uniform alarm.

An overall conversion rate for context

The header badge shows the ratio of the last stage's count to the first — the number a stakeholder skimming a dashboard wants first. It's derived the same way as everything else: computed from the stage data on every render, so switching datasets (via the demo toggle) updates the badge, every bar, and every drop-off label together, with nothing left stale.

Pure SVG-free, CSS-driven bars

The bars are plain divs with an inline width percentage and a CSS transition, so swapping datasets animates the funnel smoothly rather than snapping. No canvas, no SVG paths — just flexbox layout and computed widths, which keeps the markup easy to restyle and trivial to port to a chart library later if the data volume grows.

Two example states, one render function

The demo buttons swap between a healthy funnel (gradual, even drop-off) and a leaky one (a single stage loses most of the cohort) to show how the same render(stages) function reacts to different data. In production, replace the datasets with a real query result — anything shaped as an ordered array of { label, count } renders correctly. Pair it with a stat comparison card for stage-over-stage deltas, or an activity heatmap for when in the funnel users tend to drop.