The Busy Indicator signals that some operation is going on and that the user must wait. It does not block the current UI screen so other operations could be triggered in parallel.

Usage

Use when:

• 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.
• You need to block the screen to prevent the user from interacting with the app (i.e. Busy Dialog).

Avoid when:

• The operation takes less than 1 second.
• The progress can be measured. In this case, use the Progress instead.
• You need to indicate that a larger part of the screen is loading, such as during a page load. Use a Skeleton loading instead.

Best Practices

• Use less then 4 indicators on a single screen at the same time. If more's required, considering using a Busy Dialog to cover the entire screen.
• Can be used around the component where the busy state is triggered: e.g. "Saving…" can be shown in the Save Button.
• Use text label to give user more context what's being done currently, e.g. "Loading…", "Retrieving…", "Installing…".

Content Guidelines

• Unless necessary, use a single word for the text label.
  • Format: verb in continious present tense (-ing form) + ellipsis (…), e.g. "Loading…", "Calculating…", "Generating…"