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

animated
boolean
Whether the fill animation is triggered
color
"highlight" | "primary" | "success" | "critical"
Color of progressbar
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.

Edit source on GitHub