Carbon Design System

A progress bar provides feedback about the duration and progression of a process, such as a download, file transfer, or installation, to indicate how long a user will be waiting.

Overview
Live demo
Variants
Formatting
Content
Universal behaviors
Modifiers
Accessibility
Related
References
Feedback

Overview

A progress bar indicates that the user’s request has been received and the application is making progress toward completing the requested action. Progress bars inform users about the status of ongoing processes, the estimated time of how long a process will take, or if a request is being executed.

Live demo

Theme selector

Variant selector

CodeSandbox React

Live editor for the Determinate component


<div style={{ width: '75%' }}>
  <ProgressBar
    label="Progress bar label"
    helperText="Optional helper text"
    value={75}
  />
</div>

When to use

For a long operation or a process that can take a considerable or unknown amount of time
When the process can be described with quantitative information, such as a percentage
To visually show the progression of a system operation such as downloading, uploading, loading data, submitting a form, or saving updates
To convey that data is being requested, transferred, or processed

When not to use

When the load time is expected to display expanded information, use skeleton states instead
When manual user actions are required to progress, use a progress indicator instead
When the progress is determined by user actions such as tutorials completed, or storage space, rather than system actions
If the process takes less than 5 seconds to load, use loading instead.

Variants

A progress bar can either be determinate or indeterminate. The determinate variant is visualized as a track on which a bar fills up from left to right representing the progress. The indeterminate variant is visualized as a track on which a bar is moving along in constant speed, repeating over time.

Variant	Purpose
Determinate	Use determinate progress bars where there is clear information about the progression — they convey exact and qualitative information about the progression.
Indeterminate	Use indeterminate progress bars where there is unclear information about the progression — they convey that users’ request, action, or data is being processed at the moment without indicating how long the activity will take.

Determinate progress bars fill from 0 to 100%.

Indeterminate progress bars move along a fixed track continually until the process is complete.

Determinate progress bar

Determinate progress bars are used when the loading progress can be tracked and translated into a bar indicator which fills the track from 0% to 100% and never decreases in value or resets.

Use a determinate progress bar when the progress can be calculated against a specific goal. For example, when downloading a file of a known size.

Indeterminate progress bar

Indeterminate progress bars are used when the loading progress is unknown or the amount of wait time can’t be calculated.

Once triggered, the bar indicator will quickly and repeatably move from left to right (Carbon reserves back and forth motions for skeletons), while data is being gathered during the first stages of the load. In this scenario, a percentage value would not be present. This bar may change to a determinate indicator if enough information is gathered to calculate the load completion. The final determinate stage of the load is used to visually indicate the completion of the task to the user.

Play

Progress status

It’s best to give the user transparency about the process which usually leads to increased trust in the software or platform. However, it may not be possible to provide progress estimation in certain cases. If progress data is not available, an indeterminate progress bar can be used.

As a more concrete set of examples, there are generally three different major progressions of a system operation: downloading, uploading, and local processing.

Downloading

For downloading actions, it’s usually possible to get a value of progress and update it in real time for a determinate progress bar. Depending on the information reported from a data source, time remaining could be estimated based on how much has been downloaded so far over a time period.

Uploading

Upload actions may be unable to report real time progress status depending on the data source and API configuration. However, always strive to provide users the determinate value whenever it’s possible to inform them about the process.

Data processing

Data processing refers to manipulations of data to produce meaningful information. This can include currency exchange, file generation, data reformatting, or similar operations. Depending on the operation, time estimated or cycles to complete processing could be used to populate a determinate progress bar.

Progress bar