Loading should be used for communicating the loading status of system/global information or a specific component.
Loading being used in Carl's Shop Plus' cart panel
|
Component |
Usage |
Placement |
User action |
|---|---|---|---|
|
Loading |
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. |
|
Similar components |
Usage |
Placement |
User action |
|---|---|---|---|
|
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) |
Anatomy
Structure
|
|
1. progress indicator 2. label 3. progress confirmation |
|
progress indicator |
In this case, the progress indicator is a spinner. |
|
label |
The label is optional. |
|
progress confirmation |
Shown when the loading is done. Optional. |
Sizes and spaces
|
When there is a label, it's 8px apart from the progress indicator.
The progress indicator has 24px of width and height. |
|
|
When there is a label, it's 8px apart from the progress indicator.
The progress indicator has 48px of width and height. |
Properties
|
Property |
Value |
Description |
|---|---|---|
|
Size |
s m |
--- |
|
Label |
true false |
--- |
Behaviour
Interaction
Loading being used in Carl's Shop Plus cart panel
Responsiveness
There is no change to the component when it comes to responsiveness. The width and height of the progress indicator are fixed, whereas the label adjusts to its content and remains centred with the progress indicator.
The width on each breakpoint
|
Component |
Extra-large >1366px |
Large 1366px |
Medium 1024px |
Small 768px |
Extra-small 428px |
|---|---|---|---|---|---|
|
Medium loading* |
48px |
48px |
48px |
48px |
48px |
|
Small loading* |
24px |
24px |
24px |
24px |
24px |
*Refering only to the progress indicator itself, excluding the label width, which adjusts to the content of the label.
The height on each breakpoint
|
Component |
Extra-large >1366px |
Large 1366px |
Medium 1024px |
Small 768px |
Extra-small 428px |
|---|---|---|---|---|---|
|
Medium loading* |
48px |
48px |
48px |
48px |
48px |
|
Small loading* |
24px |
24px |
24px |
24px |
24px |
*Refering only to the progress indicator itself, excluding the label height, which adjusts to the content of the label.
Guidelines
⛔️ Don't
Don't use the loading to indicate the percentage or quantity of the progress. When the progress is measurable, use the progress bar instead.
✅ Do
It's recommended to use an overlay behind the loading when the content is updating.