Usage-Based Billing Meter — Free Metered SaaS Usage Widget (HTML/CSS/JS)

Usage-based SaaS pricing — pay for what you use above an included allowance — is everywhere in API platforms, storage products, and infrastructure tools, but it creates a specific UX problem: a plain progress bar tells a customer they're "at 86%" without telling them what that means in dollars. This snippet builds a metered-usage widget in plain HTML, CSS, and vanilla JavaScript that shows the actual cost math — included allowance, units used, the per-unit overage rate, and a running estimated total — so a customer never gets a billing surprise.

A bar that means something

The track fills toward the included allowance and is visually capped at 100%, with a subtle marker showing exactly where the allowance line sits. Once usage crosses that line, the fill and the status badge shift from blue to orange — a single isOver boolean in render() drives both, so the color story is always consistent with the numbers underneath.

Overage math shown, not hidden

Below the bar, a breakdown lists the included allowance, the units used, and — only once usage exceeds the allowance — an overage line that spells out the exact arithmetic: the number of units over allowance multiplied by the per-unit rate, equalling the overage cost. That overage line is entirely hidden while usage is within the plan, so the widget stays clean for the common case and only surfaces complexity when it's actually relevant.

One render function, one source of truth

Everything — the fill width, the badge, the used/included labels, the overage line, and the estimated total — is computed inside a single render(used) function from three constants: the included allowance, the overage rate, and the base plan price. There's no way for the bar to say one thing and the cost summary to say another, because both come from the same used number on every call. The demo slider exists only to let you see every state; in production you'd call render() with a real usage count from your metering pipeline.

Estimated total, not a guess

The "estimated total this cycle" line is simply base price plus overage cost — real math a finance-conscious customer can verify by hand, which is exactly what builds trust in metered billing. Pair it with a quota usage meter for hard-limit resources, an invoice preview for the eventual bill, or a usage calculator so prospects can estimate cost before they sign up.

Customizing it

Swap the resource (storage GB, compute minutes, seats-with-overage), change the overage rate or add tiered overage pricing (different rates per band), or wire the days-remaining note to a real billing-cycle end date. Because the math lives in one function, extending it to tiered rates is a matter of replacing the single multiplication with a small loop over rate bands.