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

ElementClassDescription
.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.
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top