<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>
	

<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>