Canonical inventory
Feedback · core
Progress bar
feedback.progress-barProgress bar: A system response that communicates progress, status, completion, or a problem.
progress barthe system messagethe progress or status indicator
States5
Touch targetDisplay
Evidence4
Introduced by8 kits
Visual specimen
Same contract. Every kit voice.
Translation table
What code calls it.
Web<progress>The closest native or standardized web primitive.direct
ARIAprogressbarThe primary accessibility role or state pattern.direct
SwiftUIProgressViewThe nearest named SwiftUI API.direct
AppKitNSProgressIndicatorThe nearest named AppKit API.direct
Anatomy
Every part, named.
- 1Status container
- 2Signal or progress indicator
- 3Primary message
- 4Optional supporting detail or dismissal
Often confused with
Similar shape. Different contract.
Spinner
feedback.spinnerShares a visual family, but has a different role, state model, or interaction contract.
Skeletonfeedback.skeletonShares a visual family, but has a different role, state model, or interaction contract.
Progress ringfeedback.progress-ringShares a visual family, but has a different role, state model, or interaction contract.
Prompt · paste into your agent
Ask for the exact thing.
Implement the canonical Progress bar component (feedback.progress-bar). Progress bar: A system response that communicates progress, status, completion, or a problem. Support these states: neutral, success, warning, error, loading. Use semantic design tokens rather than raw visual values. Preserve a minimum appropriatepx touch target where interactive. Provide and verify: implementation, state-matrix, responsive, reduced-motion. Keep the component API stable so every Studio kit can supply its own rendering without changing the behavior contract.Studio contract
What must be proven.
Required states
neutral · success · warning · error · loading
Required evidence
implementation · state-matrix · responsive · reduced-motion
Source union
mavan · jade · lumen · aurora · cabana · purple-rain · spatial · margin