Example
Props
Value
ProgressBars are controlled with the value prop. By default, the value prop represents the current percentage of progress, as the minimum and maxiumum values default to 0 and 100, respectively.
Min/Max
Alternatively, a different scale can be used by setting the minValue and maxValue props.
Formatting
Values are formatted as a percentage by default, but this can be modified by using the formatOptions prop to specify a different format. formatOptions is compatible with the option parameter of Intl.NumberFormat and is applied based on the current locale.
Indeterminate
By default, the ProgressBar is determinate; when progress can be calculated against a specific goal. Use the isIndeterminate prop when progress is happening but the time or effort to completion can’t be determined.
Labelling
Labels and values are shown by default, but they can be hidden as needed. Use the showValueLabel prop to hide the value, and instead provide an aria-label attribute for a visually hidden label.
By default, the value label is formatted as a percentage, but can be customised with the valueLabel and formatOptions props.