BusyIndicator

v0.12.0
@ui5/webcomponents
<ui5-busyindicator>

Busy Indicator with different size

<div>
	<ui5-busyindicator active size="Small"></ui5-busyindicator>
	<ui5-busyindicator active size="Medium"></ui5-busyindicator>
	<ui5-busyindicator active size="Large"></ui5-busyindicator>
</div>
	

Busy Indicator wrapping other elements

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

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

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

	document.getElementById("fetch-btn").addEventListener("click", event => {
		busyIndocator.active = true;

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

				list.appendChild(el);
			});

			list.noDataText = "";
			busyIndocator.active = false;
		}, 2000);
	});
</script>
	

Overview

The ui5-busyindicator 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

For the ui5-busyindicator you can define the size of the indicator as well as whether it is shown or hidden. In order to hide it, use the html attribute hidden or display: none;

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.
size
BusyIndicatorSize
"Large"
Defines the size of the ui5-busyindicator.

Note: Available options are "Small", "Medium" and "Large"

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 ui5-busyindicator will appear.
Theme: Fiori 3 Belize High Contrast Black
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel