Updated 18 December 2024
Progress bar
Updated 18 Dec 2024View Figma
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.
Properties
Tone
Sets the color treatment of the progress bar.
Size
Adjust the size of the progress bar. Medium is the default.
Tips
Adjusting progress with auto layout
The progress bar allows for adjusting the progress of the bar to show the progression of a given task.
To adjust the progress, select the progress bar component and adjust the auto layout right padding to change the highlighted portion.
Progress bar(12 variants)
Figma notes
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.
Polaris React: