Loading Spinner

Available since 1.0.0

A loading spinner informs the user of an ongoing operation. Only one busy indicator should be shown at a time.

The aria-hidden attribute is used to hide and show the element. Loading indicators are not visible all the time, only when needed. To show and hide the loading indicator the aria-hidden attribute is used to hide/show the element.

Although the following examples use the <h3> tag for the title element, the styling provided by Fiori Fundamentals will remain consistent for any heading level used. <h1> should be reserved for the page title.

Loader element

The loading element is used to display the loading indicator animation.

<div class="fd-spinner" aria-hidden="false" aria-label="Loading">
    <div></div>
</div>

Usage with other elements

The loading indicator is most often used within another component to indicate the loading state. A container (even ui-, app-, and page-level) can be “activated” by setting aria-busy="true".

The spinner should be included inside the container. Visibility can be toggled in relation to the aria-busy attribute. They should always be opposites, i.e, if currently loading, section[aria-busy="true"], .fd-spinner[aria-hidden="false"], once the content is loaded, toggle to false and true respectively.

<div class="fd-panel" aria-busy="true">
    <div class="fd-spinner" aria-hidden="false" aria-label="Loading">
        <div></div>
    </div>
    <div class="fd-panel__header">
        <h3 class="fd-panel__title">Lorem ipsum</h3>
    </div>
    <!-- Loaded content goes here -->
    <div class="fd-panel__footer">
        <p><em>Etiam pulvinar turpis sed velit porttitor vel adipiscing velit fringilla.</em></p>
    </div>
</div>