Determinate or indeterminate progress geometry. These classes belong to the opt-in Official preset. Add
@presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight
used alongside these structural shortcuts.
Classes
progress,progress-indicator,progress-indicator--indeterminate
Example
The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.
<label for="upload">Uploading</label>
<progress id="upload" class="progress" max="100" value="60">60%</progress>Variants and composition
A native progress element may use progress directly. A custom track can contain progress-indicator; progress-indicator–indeterminate omits a numeric state.
Root rd:* utilities control the native track/fill and a direct
progress-indicator. The default is a pill; rd:0 squares the root and
its fill together. Keep the indicator directly under its track.
Behavior and accessibility
Native progress keeps its value semantics. For a custom indeterminate bar, omit aria-valuenow and expose a textual loading status.
Reference
See the interactive Storybook specimen. Continue to Prose or return to the Official preset overview.