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
<ProgressBar progress={75} />
Name
Type
Description
progress
number
the progression of certain tasks
size
enum
Size of progressbar

Purpose

Put the merchant first by identifying the problem they face and the component that helps them solve it.

Problem

When a task or operation is in progress, merchants don’t know how much is left to complete, which can cause a sense of unease.

Solution

Progress bars create a better merchant experience by communicating how much of task has completed and how much is left.


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.

Content guidelines

There are no content elements that are specific to progress bar.