A context window, a rate limit, a storage quota — anything with a ceiling. The reader needs to know how close they are to it, not just that "progress" is being made. That's a different question than the reading-progress bar answers, so it gets a different component.
Context window36K / 120K tokens
Context window84K / 120K tokens
Context window114K / 120K tokens
Meter
Gradient fill + numeric label
Each bar is a single-hue light-to-dark gradient (linear-gradient(90deg, var(--x-ink), var(--x))), not a flat color. The gradient gives the fill a sense of depth and direction — it reads as "filling toward" the edge.
Swap the accent token per instance to signal headroom (teal), caution (yellow), or near-limit (coral/wrong). That's a per-instance choice, not a built-in traffic light — the source component itself is one hue.
Counter-example
A bar with no number
82% full and 95% full look almost the same bar. Without the fraction or percent printed next to it, the reader can't tell whether to act.
Rule: a meter without a numeric label is ambiguous. Always pair the fill with the actual number.
Created for you, with ❤️ by Robert Evans· The AI Design Architect