Intro

The busy indicator informs the user about an ongoing operation.

Busy indicator

When to Use

false

Use the busy indicator if:

You need to indicate an unspecified amount of wait time that is longer than 1 second.
A progress can’t be estimated or doesn’t need to be visualized in detail.
Only part of the application or a particular component is affected.

dont

false

Don’t use the busy indicator if:

The operation takes less than 1 second.
The progress can be measured. In this case, use the progress indicator instead.
You need to indicate that a larger part of the screen is loading, such as during a page load. Use a placeholder loading animation instead.
You need to block the screen to prevent the user from interacting with the app. Use a busy dialog instead.

Examples

File Upload

The file upload dialog contains multiple upload operations. The user must be able to cancel each operation. Since the operation is related only to one row and not to the full app, there is no need to block the whole screen. The user still needs to be able to interact with the system, and as shown in this case, select the next file to upload.

Busy indicator for file upload

Table Rows

Each row in the table has an action related to the table item. Clicking the Run button in a specific row changes status of the current item. The user is still able to work on the other items or cancel the current operation. Since each SAPUI5 control provides a busy state by default, you could also set the busy state at row level. In this case, however, there would be no option to cancel the operation.

Busy indicator in table rows

Do not change the mouse cursor to show progress.
Do not use a custom progress indicator icon.
Avoid showing multiple busy indicators simultaneously.

Anatomy

The busy indicator component consists of two parts:

Busy icon: Animated dots that indicate the ongoing operation.
Text (optional): Provides details about the current operation.

Anatomy of the busy indicator

information

If the space is limited, avoid using a busy indicator text. For example, when placing the indicator near a button in a small area, the text may overlap with the button label.

If you choose to show text, place the busy indicator inside a container like a toast or dialog, and allow the text to wrap. This keeps the text clear and readable.

Types

Sizes

The busy indicator supports three predefined sizes:

Small: For areas smaller than 3×3 rem, such as when reloading images or within compact components like table rows.
Medium: For areas larger than 3×3 rem, including list items, tiles, dialogs, or block overlays within components.
Large: Use within a full screen block overlay.

Small, medium, and large busy indicators without text

Variants

The busy indicator comes with two predefined (optional) variants:

Without text: Use text below the busy indicator in all three sizes to add details about the ongoing process.
With text: Use the busy indicator standalone without any text added below it.