BusyIndicator

v0.12.0
@ui5/webcomponents
<ui5-busy-indicator>

Busy Indicator with different size

<ui5-busy-indicator active size="Small"></ui5-busy-indicator>
<ui5-busy-indicator active size="Medium"></ui5-busy-indicator>
<ui5-busy-indicator active size="Large"></ui5-busy-indicator>
	

Busy Indicator wrapping other elements

Fetch List Data
<ui5-button id="fetch-btn" style="width: 120px;">Fetch List Data</ui5-button>

<ui5-busy-indicator id="busy-container" size="Medium">
	<ui5-list id="fetch-list" no-data-text="No Data" header-text="Available Items"></ui5-list>
</ui5-busy-indicator>

<script>
	const busyIndicator = document.getElementById("busy-container");
	const list = document.getElementById("fetch-list");
	const fetchBtn = document.getElementById("fetch-btn");

	fetchBtn.addEventListener("click", event => {
		busyIndicator.active = true;

		setTimeout(() => {
			const elements = ["UI5", "Web", "Components"].forEach(title => {
				const el = document.createElement("ui5-li");
				el.textContent = title;
				list.appendChild(el);
			});

			busyIndicator.active = false;
		}, 2000);
	});
</script>
	

Overview

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 control 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";

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
active
boolean
false
Defines if the busy indicator is visible on the screen. By default it is not.
delay
Integer
1000
Defines the delay in milliseconds, after which the busy indicator will be visible on the screen.
size
BusyIndicatorSize
"Medium"
Defines the size of the component.

Note:
  • Small
  • Medium
  • Large
text
String
""
Defines text to be displayed below the component. It can be used to inform the user of the current operation.
since v1.0.0-rc.7

Slots

This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.

Slot
Type
Description
default
Node [0..n]
Determines the content over which the component will appear.
Theme: Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White Belize High Contrast Black High Contrast White Horizon
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel