The busy indicator informs the user about an ongoing operation.
Large busy indicator
When to Use
Don’t use the busy indicator:
- If the operation takes less than 1 second.
- If the progress can be measured. In this case, use the progress indicator instead.
- To indicate that a larger part of the screen is loading (for example on page load). Use a placeholder loading animation instead.
The busy indicator component consists of two parts:
- Busy icon: Animated dots that indicate the ongoing operation.
- Text (optional): Provides additional information about the ongoing operation.
If the space where the busy indicator is to be placed is limited, avoid using a busy icon text. For example, don’t show a text if the busy indicator appears near a button in a small area. This can result in the busy indicator text appearing on top of the button text.
If you opt to display a text, place the busy indicator within a container, such as a toast or dialog, and allow it to wrap. This ensures that the text is always readable.
Anatomy of the busy indicator
The busy indicator comes with three predefined sizes:
- Small: Use inside areas smaller than 3×3 rem (for example, when reloading images or inside small components like compact table rows).
- Medium: Use inside areas larger than 3×3 rem (for example, inside a list item, tile, dialog, or a block overlay within a component).
- Large: Use inside a full screen block overlay.