Progress bar
Progress bars provide a visual feedback on the progression of a process, expressed as a percentage value. Processes visualized in progress bars do not have defined step and their duration and completion depend on the system - e.g. downloads, uploads or installations.
UX/UI Guidelines
Check the design documentation of the component in ZeroHeight.
Usage guidelines
When to use
- To give feedback about the duration of a process that has no determined steps or whose completion depends on the system rather than the users' action.
- When the duration of a process can be estimated.
When not to use
- To guide users through the completion of a multi-step process; use Progress tracker instead.
- When you need an indeterminate loading indicator for your page or content, use Loader.
Writing guidelines
- Labels: Progress bars can be used with or without labels. Titles describe the process and captions displays additional, contextual information. Avoid complex or technical words.
- Length: Keep labels short and meaningful.
- Capitalization and case: Write headings in sentence case.
Specifications
Anatomy
- Title: (optional) short description of the process the progress bar refers to.
- Progress indicator: indicates how much of the process has been completed.
- Track: the area that the fill moves across.
- Percentage: (optional) quantitative value of progress.
- Caption: (optional) gives contextual information.
- Progress indicator: indicates how much of the process has been completed.
- Track: the area that the fill moves across.
- Percentage: (optional) quantitative value of progress.
- Caption: (optional) gives contextual information.
Types
There are two types of progress bar: Linear and Radial. Choose the option to use according to the layout and horizontal space available in your design.
Size
Linear progress bar is available in Medium and Small sizes. The width of the component can largely vary according to the size of the screen or container it is placed in.
Radial progress bar is available in five sizes: Extra large, Large, Medium, Small and Extra small.
Styling
Progress bars are only available to sit on light backgrounds. White or Zurich White are the recommended colors to use so there is enough contrast between the component and the background.
By default, progress bars have a Zurich Blue progress indicator that shows the progress.
Linear
The progress indicator color can vary from the default Zurich Blue to Peach (to communicate an error) or to Sky Blue (to highlight the progress).
Radial
Radial progress bar come into two different styling variants: solid and outlined. Choose the variant that best fits your background color and overall layout.
Labels
Behavior
Positioning
- Progress bars can be used in a variety of cases. In particular, linear progress bars can be resized to fit the width of any container or layout.
- Make sure spacing is used correctly to clearly communicate which element progress bar is related to.
Accessibility guidelines
Design considerations
- Make sure there is enough contrast between progress bars colors and its background.
- For a more accessible experience, make use of labels whenever you can and keep them short while being descriptive.
From Figma to code
...
Customization
INFO
Check everything about the customization mechanics in the "How it works" documentation.
| CSS Variable | Type | Description |
|---|---|---|
--z-progress-bar--color | color | Main color |
--z-progress-bar--title-color | color | Header color |
--z-progress-bar--caption-color | color | Caption color |
--z-progress-bar--percentage-color | color | Percentage color |
--z-progress-bar--bg | color | |
--z-progress-bar--track | color | Track color |
--z-progress-bar--size | distance | |
--z-progress-bar--stroke | distance |
...