Carbon Design System

Preview the progress bar component with the React live demo. For detailed code usage documentation, see the Storybooks for each framework below.

Documentation

Theme selector

Variant selector

Live editor for the Determinate component


<div style={{ width: '75%' }}>
  <ProgressBar
    label="Progress bar label"
    helperText="Optional helper text"
    value={75}
  />
</div>