Progress bar

The progress bar is a visual indicator that shows how much of a task or process has been completed, giving users immediate feedback.

UsageCodeAccessibility
20% of 100%DonePreparing download
  <sl-progress-bar value="20" label="File download">
    20% of 100%
  </sl-progress-bar>
  <sl-progress-bar value="50" label="File download" variant="success">
    Done
  </sl-progress-bar>
  <sl-progress-bar indeterminate label="File download">
    Preparing download
  </sl-progress-bar>

When to use

Long operations

A progress bar is essential for tasks that can take a considerable amount of time to complete or have unpredictable durations. It helps users stay informed about the ongoing status of the process.

File uploads/downloads

A progress bar is used to visually indicate the progression of system operations like downloading and uploading files. It provides users with real-time feedback on the status of these processes.

Quantitative information

A progress bar is suitable when the progress of a task can be quantitatively measured, such as using percentages. For instance, it's effective for showing teachers the percentage completion of their students' assignments.

When not to use

Expanded information

When the loading time is anticipated to display extensive information, opt for skeleton states instead of a progress bar.

Short actions

If a process completes quickly, typically in less than 5 seconds, it's better to use a spinner instead of implementing a progress bar.

Anatomy

ItemNameDescriptionOptional
1LabelText describing the process referenced by the progress bar. Can be visually hidden but must be defined for accessibility purposes.yes
2HintAssistive text providing additional information about the ongoing process. For determinate progress bars, it typically displays progression as a percentage, fraction, ratio, or numeric value.no
3TrackThe static area that the bar indicator moves on top of and acts as a fixed visual reference of what the total length and duration of the process could be.no
4Bar indicatorIndicates how much the process has progressed.yes
5Status iconIndicates the state of the progress bar.yes

Figma Options

With these options, you can tweak the appearance of the progress bar in Figma. They are available in the Design Panel so you can compose the progress bar to exactly fit the user experience need for the use case you are working on.

ItemOptionsDescription
Statedefault success error warningTo indicate the state of the progress bar.
Progress0% 25% 50% 75% 100% inderterminateTo visualise the progress.
LabelbooleanTo show the label on top of the progress bar.
HintvalueTo enter the value of the hint.
Interactive example