Skip to main content

BusyIndicator

<ui5-busy-indicator> | Since 0.12.0

The ui5-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. It displays 3 dots and each dot expands and shrinks at a different rate, resulting in a cascading flow of animation.

Usage​

For the ui5-busy-indicator you can define the size, the text and whether it is shown or hidden. In order to hide it, use the "active" property.

In order to show busy state over an HTML element, simply nest the HTML element in a ui5-busy-indicator instance.

Note: Since ui5-busy-indicator has display: inline-block; by default and no width of its own, whenever you need to wrap a block-level element, you should set display: block to the busy indicator as well.

When to use:​

  • The user needs to be able to cancel the operation.
  • Only part of the application or a particular component is affected.

When not to use:​

  • The operation takes less than one second.
  • You need to block the screen and prevent the user from starting another activity.
  • Do not show multiple busy indicators at once.

ES6 Module Import​

import "@ui5/webcomponents/dist/BusyIndicator.js";

Basic Sample​

Properties​

text​

DescriptionDefines text to be displayed below the component. It can be used to inform the user of the current operation.
Typestring | undefined
Defaultundefined
Since1.0.0-rc.7

size​

DescriptionDefines the size of the component.
Type"S" | "M" | "L"
Default"M"

active​

DescriptionDefines if the busy indicator is visible on the screen. By default it is not.
Typeboolean
Defaultfalse

delay​

DescriptionDefines the delay in milliseconds, after which the busy indicator will be visible on the screen.
Typenumber
Default1000

textPlacement​

DescriptionDefines the placement of the text.
Type"Top" | "Bottom"
Default"Bottom"

Slots​

default​

DescriptionDetermines the content over which the component will appear.
TypeArray<Node>

Events​

No events available for this component.

Methods​

No methods available for this component.

CSS Parts​

No CSS parts available for this component.

More Samples​

Sizes​

The BusyIndicator comes in several sizes - S, M and L.

Text Placement with display text​

The BusyIndicator can display text either above (via text-placement="Top") or below the animated dots (by default).

Busy component​

The BusyIndicator can be placed over another web component.