Skip to main content

Progress Bar

Use a progress bar to show users how much of a task or process has been completed. The progress bar provides visual feedback on progress through a linear indicator that fills from left to right.

Structure​

  • Container The outer boundary of the progress bar that defines its total width
  • Fill The colored bar that indicates the current progress level
  • Aria label A screen reader-only label that describes the progress bar
Progress:

Progress Bar

Guidelines​

When to use​

  • Use a progress bar when you need to show how far through a task or process the user is
  • Use for long-running operations where the completion percentage is known
  • Use to provide feedback during file uploads, form completion, or multi-step processes

When not to use​

  • Don't use a progress bar if the duration or completion percentage is unknown - use a loading spinner instead
  • Avoid using for very quick operations (under 2 seconds) where the bar may fill too quickly for users to perceive the progress

Variants​

Default (Primary)​

  • Uses the primary brand color (blue) for values under 100%
  • Suitable for most progress indicators

Success​

  • Automatically displays in green when progress reaches or exceeds 100%
  • Indicates successful completion of the task

Content​

Progress values​

  • Progress is represented as a numeric value between 0 and 100
  • Values above 100 are supported and will display as a full bar with success styling

Behaviour​

Color changes​

  • When value < 100: displays in primary color (blue)
  • When value >= 100: automatically changes to success color (green) to indicate completion
Progress:

Progress Bar Complete

Labels​

Progress:

Progress Bar with Labels

  • The component includes an ariaLabel prop for screen reader accessibility (default: "Progress:")
  • This label is visually hidden but announced to screen reader users
  • If you need a visible label above the progress bar, add it manually outside the component:
<div>
  <label className="mb-2">Upload Progress</label>
  <ProgressBar value={65} ariaLabel="Upload progress" />
</div>

Accessibility​

  • The progress bar uses semantic HTML with appropriate ARIA attributes
  • Adheres to AA accessibility standards for color contrast
TODO
  • Provide text alternatives or announcements for screen readers when progress updates significantly
  • The progress value should be programmatically determinable