<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5HGSQD2L" height="0" width="0" style="display:none;visibility:hidden" title="GTM"></iframe>

Progress Bar

Displays the percentage of completion of a system operation.
styleKeys: progressBarscriptKeys: progressBar

Progress Bar is determinate indicator that informs the user of the percentage of completion of a system operation.

Usage

The preview has been updated.

Convenience Component

ProgressBar

ProgressBar has no props of its own

All props are forwarded to the element specified in the as prop (default: <progress/>)

The React ProgressBar is a convenience component made of these sub-components:

Share

Note that if you use this API, ProgressBarContainer uses the className prop instead of Progress.

Best practices

  • Use when uploading or downloading large files or a longer system operation.
  • When customizing the Progress component via themes, you can add a border or drop shadow around the bar, but be aware that some browsers (including Chrome and Safari) can be inconsistent about the width, making it appear thicker on some sides.

Implementation

  • In vanilla JS, if you need to change the value of the progress bar, you will need to use the function setProgressValue() on the <progress> DOM node, e.g. setProgressValue(myProgressBarNode, 23); This function will update both the progress bar and the numeric label.

Props

ProgressBarContainer
This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
ProgressBar
This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
ProgressOutput
This component is implemented using the <output /> as the root element. You can utilize the native attributes supported by <output /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
Progress
This component is implemented using the <progress /> as the root element. You can utilize the native attributes supported by <progress /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
Was this page useful?

Thanks for your feedback!

Feel free to include your name if you wish to have a follow up conversation.


Published: Jan 7, 2022Last updated: Sep 18, 2024