Progress bars are related to the status of a specific action that the user made and communicate the completion of that task.
They should be used when the progress is measurable, as they do not merely communicate a loading status.
Progress bar being used in Cadi
|
Component |
Usage |
Placement |
User action |
|---|---|---|---|
|
Progress bar |
Addresses the progress status of an action made by the user |
Inside or near the component it refers to. The position varies with the component. |
The user can input information and the system returns the progress status (e.g. upload an image or fill in a form) |
|
Similar components |
Usage |
Placement |
User action |
|---|---|---|---|
|
Addresses global/system loading |
Center of the page/view/component. Exception: infinite scroll, where the spinner is placed at the end of the page. |
It's not dependent on user action. If anything, the user can navigate to a new view and the spinner shows while it's loading. |
Anatomy
Structure
|
|
1. progress indicator2. progress percentage3. label |
|
progress indicator |
Visual horizontal bar graph which indicates the percentage in a relation between foreground and background. |
|
progress percentage |
Numeric display of the percentage being visually shown. Optional. |
|
label |
Text information to give the percentage some context. The suggested use case is Loading information. Optional. |
Sizes and spaces
|
The progress indicator has 4px of height.
The progress percentage has a fixed width of 32px. The distance between the progress indicator is 8px.
If there islabel, it should be positioned in relation to both the progress indicator and progress percentage. Horizontally centered and the vertically 12px. |
|
|
The progress indicator has 8px of height.
The progress percentage has a fixed width of 32px. The distance between the progress indicator is 8px.
If there islabel, it should be positioned in relation to both the progress indicator and progress percentage. Horizontally centered and the vertically 12px.
|
Properties
|
Property |
Value |
Description |
|---|---|---|
|
Size |
s m |
Progress indicator height options. |
|
Label |
true false |
Boolean option to display label. |
|
Progress percentage |
true false |
Boolean option to display progress percentage. |
|
Disabled |
true false |
Boolean option to display disabled style. |
Behaviour
Interaction
Image upload progress
Responsiveness
Responsive behaviour of the progress bar
The width on each breakpoint
The progress indicator has a fluid width, occupying all of the available space in the container.
The progress percentage has a fixed width of 32px.
The height on each breakpoint
The height of the component is not influenced by the height of the device it's being viewed on.
Guidelines
⛔️ Don't
Don't use the progress bar when you're communicating the loading status of a view (this usually isn't a measurable action).