ProgressBar
Beta notice: This page is being built.Edit on GitHub(opens in new tab)
Displays determinate or indeterminate progress with a semantic state.
longlink docs component "ProgressBar"
Example
Properties
| ProgressBar - Properties |
|---|
label Accessible label.string |
value Current value (ignored when indeterminate).number |
max Maximum value.number |
hasValueLabel Show formatted value text (ignored when indeterminate).boolean |
formatValueLabel Formats usage counts or units instead of the default percentage.(value: number, max: number) => string |
variant Semantic color variant."success" | "error" | "warning" | "accent" | "neutral" |
marks Labeled target marks on the 0-to-max scale, hidden when indeterminate.readonly { value: number; label: string; }[] |
isDisabled Visually disabled state: grays out the fill and text. Use for canceled or inactive operations.boolean |
isLabelHidden Visually hide the label (remains accessible).boolean |
isIndeterminate Animated loading indicator for unknown progress.boolean |