Design
Web component
Is documented
Principles
Use when
- to visually represent the loading process of a section or data where user interaction with other parts of the interface cannot be prevented.
- When the system needs time to fetch the next action from input fields, buttons, dropdowns.
- Use when the system is unable to determine with certainty what layout and components are used once the screen loads. If the system can determine layout / components, use the skeleton component instead.
Don’t use when
- if the system can determine layout and components to indicate full page layout of the content or a dynamic datas of the content being loaded, use skeleton instead.
- to indicate how long the system will complete the process in a predictable or unknown amount of time, use spinner instead.
Structure
- Progress label (optional)
- Progress value label (optional)
- Indicator (foreground&background)
Properties
Size
Large
Large is for modal or large-scale cards on the layout.
Default
Default is for cards on a layout or on the pages.
Small
Small is for the table or widgets.
Behavior
Progress label
A label is used to explain that the current action of the bar is ongoing. Use it when it’s necessary to explain the situation.
Value Label
Value label is for displaying progression value as a percentage or in steps.
Using the progress bar only
It’s possible to use the bar only, but please be cautious to place body text or another supportive component that can be related to the progress bar.
Scaling
Progress bar width can be customized, mostly can fill the parent’s container.