Updated: July 16, 2024

Busy Indicator

ui5-busy-indicator | v1.0

Intro

The busy indicator informs the user about an ongoing operation.

Large busy indicator

When to Use

Do

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

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.

Anatomy of the busy indicator
Anatomy of the busy indicator

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

Components

Implementation