ProgressBar

Use the ProgressBar component to show your users that a system operation such as downloading, uploading, or processing is progressing. The ProgressBar can be used to visualize determinate or indeterminate progress.

OverviewPropertiesUsage

ProgressBarProps

extends, , , , ,

Name	Type	Default	Description
value?	|	'indeterminate'	The current value.
min?		0	The minimum allowed value.
max?		100	The maximum allowed value.
density?	|	'default'	Controls the density of the rendering.
variant?		'primary'	Controls the appearance of the progress.
'aria-valuetext'?		the value of the progress as percentage.	The aria-valuetext attribute defines the human-readable text alternative of aria-valuenow for a range widget. By default, the value will be given as a percentage. If the value is not a percentage, you should provide aria-valuetext. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext

ProgressBar.Label

The label can be used to render any JSX above the ProgressBar. If you only use text inside the label, it will automatically apply a text-ellipsis when using the ProgressBar in condensed mode.

ProgressBarLabelProps

extends, ,

ProgressBar.Icon

The icon is rendered at the top right of the ProgressBar. It's recommended to only use icons as children, but you can provide any JSX.

ProgressBarIconProps

extends, ,

ProgressBar.Value

The value is rendered underneath the ProgressBar and can be utilized to e.g. show the amount of data already downloaded and the total amount of data.

ProgressBarValueProps

extends, ,