Busy indicator
A busy indicator informs the user about the status of an ongoing process to reduce uncertainty.
To see a detailed explanation of all existing modifier and state classes, please refer to the usage table below.
Busy indicator (xsmall)
<div class="busyIndicator is-shown">
<div class="busyIndicator__ring busyIndicator__ring--xsmall"></div>
</div>
Busy indicator (small)
<div class="busyIndicator is-shown">
<div class="busyIndicator__ring busyIndicator__ring--small"></div>
</div>
Busy indicator (medium / default)
<div class="busyIndicator is-shown">
<div class="busyIndicator__ring"></div>
</div>
<!-- the busyIndicator__ring--medium class is optional / default size -->
<div class="busyIndicator is-shown">
<div class="busyIndicator__ring busyIndicator__ring--medium"></div>
</div>
Busy indicator (large)
<div class="busyIndicator is-shown">
<div class="busyIndicator__ring busyIndicator__ring--large"></div>
</div>
Large Busy indicator with overlay
<div class="busyIndicator busyIndicator--withOverlay is-shown">
<div class="busyIndicator__ring"></div>
<div class="busyIndicator__overlay"></div>
</div>
<h2>This demo toggles the visibility of a Busy indicator every 1.5 seconds.</h2>
<!-- ============================================================= -->
<!-- JavaScript Code following is only for demonstrational purpose -->
<!-- ============================================================= -->
<script>
window.onload = function(e) {
// sample JS for activating busy indicator every 1.5 seconds
function displayRandomIndicator() {
var indicators = document.querySelectorAll('.busyIndicator');
for (var i = 0; i < indicators.length; i++) {
indicators[i].classList.toggle("is-shown");
}
}
window.setInterval(function(){
displayRandomIndicator();
}, 1500);
};
</script>
Usage
Element | Class | Description |
---|---|---|
.busyIndicator | .is-shown | Sets a Busy indicator's visibility. Without this class, it will not be shown. Also toggles the visibility of a "large Busy indicator with overlay". |
.busyIndicator__ring | .busyIndicator__ring--medium | Sets the size of the Busy indicator to default size. |
.busyIndicator__ring | .busyIndicator__ring--xsmall | Sets the size of the Busy indicator to extra small. |
.busyIndicator__ring | .busyIndicator__ring--small | Sets the size of the busy indicator to small size. |
.busyIndicator__ring | .busyIndicator__ring--large | Sets the size of the Busy indicator to large size. |
.busyIndicator | .busyIndicator--withOverlay | Centers the Busy indicator on screen and displays an overlay behind it. |