ProgressBar
Display progress as percentage
Introduction
ProgressBar helps users understand how far along a task is and how much is left to go. It's especially helpful for longer processes where seeing progress makes the wait feel easier. The bar clearly shows progress, usually from 0% to 100.
Variants
- Small: Use for compact layouts or inline progress indicators where space is limited, such as table.
- Medium: The default size, suitable for most use cases and provides good visibility without taking up too much space.
- Large: Use when progress needs to be highly visible.
Interactive demo
Try the interactive demo below to explore different progress variants.
Additionals
There are several ways to customize the progressbar component to fit your needs:
Label
Change the label format from percentages to numbers or other values that better suit your use case. For improved context, we recommend placing a label above or below the progressbar.
Loading state
Use the loading state when progress is happening but you don't know the exact value yet. The value will increase over time until it reaches 100%. When using the loading state, it's a good idea to provide additional context with a label to inform users about the ongoing process.
Avoid using state colors, such as success, alert, warning, when in loading state. This can create confusion about the status of the process. If something has failed during the process, switch to the alert or warning state instead.
Examples
Here are some examples of how to use and not use the loading state:
A label or some sort of context around the progressbar should be added to provide clarity during an ongoing process, such as "Uploading file...".
Loading and disabled states serve different purposes. Do not use a disabled state to represent ongoing progress.
State color
We also have state colors available for specific use cases. These colors can be used to indicate different statuses of the progress, such as success, warning, or alert.
Examples
Here are some examples of how to use and not use the state colors on progressbar:
Feedback should be provided below the progressbar to explain the state to the user. The feedback text should inform the user of what failed, and what to do next.
Do not mix state colors with loading context. The state color indicates a specific status, while the loading context indicates an ongoing process.
Disable state
The progressbar can be set to a disabled state to indicate that the process is not currently active or available. The progress value can still be shown in this state, but the disable styling indicates that progress has paused.
Examples
When to use and not use the disable state on progressbar:
Disable state can be used to indicate that the progress has paused or is not currently active. A feedback can be good addition to explain why the progress had paused.
Avoid mixing disabled states with state colors. A warning state indicates caution, and may need other actions before proceeding.
ProgressBar in components
ProgressBar can be used within various components. See the links below for more information on how progressbar can be integrated with these components.