Components menu
  2. components
  3. feedback indicators
  4. progress bar

Progress bar

The progress bar component is used to visually represent the completion of a task or operation. It shows how much of the task has been completed and how much is still left.

Examples

Use this component to visually represent the completion of a task or operation.

Drag to resize example

Props

progress
number
The progression of certain tasks
size
"small" | "medium" | "large"
Size of progressbar

Best practices

Progress bar components should:

  • Give merchants an indication of how much of the task has completed and how much is left.
  • Not be used for entire page loads. In this case, use the Skeleton page component.

View source on GitHub · Preview examples in Chromatic