Busy Indicator Overlay
A special variant of the busy indicator component that covers the whole page while it's loading.
Usage
| Name | Description |
|---|---|
window.e.utils.v2.ui.busyIndicator.show(options) |
Opens a fullscreen busy indicator covering the whole page. |
window.e.utils.v2.ui.busyIndicator.hide(). |
Removes the fullscreen busy indicator. |
Parameters
| Name | Description | Type | Required | Default value |
|---|---|---|---|---|
isGlobal |
Makes the busy indicator to be displayed outside the iframe (fullscreen) with a different look. | boolean | false |
Example
window.e.utils.v2.ui.busyIndicator.show({ isGlobal }) / .hide({ isGlobal })
<div class="e-margin-l">
<button class="e-btn e-btn-highlight" id="toggle" type="button">Show Busy Indicator Overlay</button>
</div>
<div class="e-margin-l">
<button class="e-btn e-btn-highlight" id="toggleGlobal" type="button">Show Busy Indicator Overlay Global</button>
</div>
<div class="e-margin-l">
<e-notification type="info">
<e-notification-content>
Open this example in playground to see how it really works.<br>
The busy indicator will automatically disappear in 3 seconds.
</e-notification-content>
</e-notification>
</div>
<script>
toggle.addEventListener('click', () => {
window.e.utils.v2.ui.busyIndicator.show();
setTimeout(() => window.e.utils.v2.ui.busyIndicator.hide(), 3000);
});
toggleGlobal.addEventListener('click', () => {
window.e.utils.v2.ui.busyIndicator.show({ isGlobal: true });
setTimeout(() => window.e.utils.v2.ui.busyIndicator.hide({ isGlobal: true }), 3000);
});
</script>