Quota Usage Meter — Plan Limits HTML CSS JS

Every usage-based SaaS — API platforms, storage products, team tools — needs to show customers how much of their plan they've consumed before they hit a wall. A good quota meter does three jobs at once: it shows current usage against each limit, warns clearly as a resource approaches its cap, and surfaces an upgrade path at exactly the moment it's relevant. This snippet builds that complete plan-usage dashboard in plain HTML, CSS, and vanilla JavaScript, driven by one data array.

Per-resource meters from data

Each tracked resource — API calls, storage, team seats — is an object with a used, a limit, a unit, and an icon key. render() maps the array into a labelled meter showing the formatted used/limit values, a progress fill, and a percentage caption. Numbers format intelligently (thousands get comma separators via toLocaleString, fractional GB values show one decimal), so "86,500 / 100,000" and "41.5 GB / 50 GB" both read naturally. Adding or removing a tracked resource is a data edit, not new markup.

Three-tier warning colors, computed not stored

The whole point of a usage meter is to warn *before* the customer is blocked. Each meter computes a tier from its percentage: ok (under 80%, indigo), warn (80–99%, amber, "running low"), and over (at or above 100%, red, "Limit reached"). The fill color, the percentage caption color, and the caption text all derive from that one tier function — so a resource at 86% automatically turns amber with a "running low" message, and there's no way for the color and the text to disagree. The fill width is capped at 100% so a maxed-out resource doesn't overflow its track.

An overall badge that reflects the worst resource

A single status badge in the header answers "is my account okay?" at a glance by reducing all resources to their *worst* tier — if any resource is over its limit the badge reads "Limit reached" in red; if any is merely near the limit it reads "Near limit" in amber; otherwise "On track" in green. This mirrors how users actually think about their account: one blocked resource is a problem even if the others are fine, so the summary surfaces the most urgent state rather than an average that would hide it.

An upgrade nudge that appears only when relevant

Beneath the meters, an upgrade panel stays hidden while everything is healthy and appears the moment any resource crosses into warn or over, with a message that counts how many resources are affected ("You're near your limit on 2 resources"). This is contextual monetization done right — the upsell shows up precisely when the customer has a reason to care about it, not as permanent dashboard clutter. The message wording also adapts between "near your limit" and "you've hit your limit" based on severity.

Pure render, easy to wire up

The demo buttons swap between low, near-limit, and over-limit datasets to show every state, but the component is just render(rows) — pass it your real usage data (from a billing or metering API) on load and whenever it refreshes, and the meters, badge, and upgrade nudge all recompute. There's no internal state to manage and every visual is derived from the numbers, so it can't drift out of sync with reality.