Progress Bar

<ProgressBar value={45} />

<div class="stylized-progress-container">
  <progress class="stylized-progress" max="100" value="45"></progress>
  <output class="stylized-progress-label"></output>
</div>

Convenience Component

ProgressBar

ProgressBar has no props of its own

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

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

<ProgressBarContainer className={className}>
  <Progress {...otherProps} value={value} />
  <ProgressOutput>{value}%</ProgressOutput>
</ProgressBarContainer>

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

Guidelines

Design Guidelines

• 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.

Developer Guidelines

• 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.