When to use
Use busy indicators in the following cases:
- For activities (short, indeterminate) requiring user attention.
- To display the status of a process.
- To notify users that something is loading.
A busy indicator consists of the following elements:
1. Progress ring
- An animated circle shows that something is loading at the moment.
2. Background ring
- The background ring describes the busy indicator.
The following busy indicator options are available:
- If a busy indicator is triggered by an element or component, place the spinner in that component / element and disable the element while the busy indicator is visible.
- You can place the busy indicator at a point where the user’s attention is required.
This chapter shows several busy indicator styles in the design system.
The following table gives reference to the different colors and shades:
|Progress ring||default||Background color||Gray 800|
|Background ring||default||Background color||Gray 200|
|Overlay||default||Background color||Gray 800||Opacity 70%|
Sizing and spacing
The following measurements show the dimensions for this component: