The busy indicator informs the user about an ongoing operation.

Large busy indicator

When to Use

Use the busy indicator:

• To indicate an unspecified amount of wait time that is longer than 1 second.
• If progress isn’t detectable, or it’s not necessary to indicate how long an activity will take.
• If only part of the application or a particular component is affected.

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.

Anatomy

The busy indicator component consists of two parts:

1. Busy icon: Animated dots that indicate the ongoing operation.
2. Text (optional): Provides additional information about the ongoing operation.

Note:

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.

Size Variants

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.

Small, medium, and large busy indicators

Related Links