Busy indicator

A busy indicator informs the user about the status of an ongoing process to reduce uncertainty.

Usage

When to use

Use busy indicators in the following cases:

  • For activities (short, indeterminate) requiring user attention.
  • To display the status of a process.
  • To notify users that something is loading.

General construction

A busy indicator consists of the following elements:

Busy indicator construction
1. Progress ring, 2. Background ring

1. Progress ring

  • An animated circle shows that something is loading at the moment.

2. Background ring

  • The background ring describes the busy indicator.

Options

The following busy indicator options are available:

Sizes

Busy indicator sizes
1. tiny (16px), 2. small (24px), 3. medium (48px), 4. large (96px)

Behavior

Placement

  • If a busy indicator is triggered by an element or component, place the spinner in that component / element and disable the element while the busy indicator is visible.
  • You can place the busy indicator at a point where the user’s attention is required.

Style

This chapter shows several busy indicator styles in the design system.

Overview

Textfield with tiny busy indicator
Textfield with tiny busy indicator

List element with small busy indicator
List element with small busy indicator. An example used to show the status loading for an element.

Leading region with medium busy indicator
Leading region with medium busy indicator

Examples

Main region with large busy indicator
Main region with large busy indicator

Screen with large busy indicator and dark overlay
Screen with large busy indicator and dark overlay

Color

The following table gives reference to the different colors and shades:

Name State Property Color name Modification
Progress ring default Background color Gray 800  
Background ring default Background color Gray 200  
Overlay default Background color Gray 800 Opacity 70%

Sizing and spacing

The following measurements show the dimensions for this component:

Sizing for busy indicator
Sizing for busy indicator

Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top