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

Progress60%

Properties

ProgressBar - Properties
labelstring
Accessible label.
valuenumber
Current value (ignored when indeterminate).
maxnumber
Maximum value.
hasValueLabelboolean
Show formatted value text (ignored when indeterminate).
formatValueLabel(value: number, max: number) => string
Formats usage counts or units instead of the default percentage.
variant"success" | "error" | "warning" | "accent" | "neutral"
Semantic color variant.
marksreadonly { value: number; label: string; }[]
Labeled target marks on the 0-to-max scale, hidden when indeterminate.
isDisabledboolean
Visually disabled state: grays out the fill and text. Use for canceled or inactive operations.
isLabelHiddenboolean
Visually hide the label (remains accessible).
isIndeterminateboolean
Animated loading indicator for unknown progress.