Intro

The busy indicator informs the user about an ongoing operation.

Busy indicator - Medium and Large

Busy indicator - Medium and Large

Busy indicator - Small

Busy indicator - Small

Usage

Use the busy indicator if:

The ongoing operation covers only part of a screen that has multiple controls, and:

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 interact with the system, in this case to select the next file to be uploaded.

Example: Busy indicator for file upload

Example: 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.

Example: Busy indicator in table rows

Example: Busy indicator in table rows

Do not use the busy indicator if:

Components

The busy indicator is a blue circle and can also display a text description.

Busy indicator text

Busy indicator text

Guidelines

Properties

The size of the busy indicator can also be changed.

Busy indicator sizes

Busy indicator sizes

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls

Implementation

Visual Design

Elements and Controls

Implementation