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.
The loading element is used to display the loading indicator animation.
Usage with other elements
The loading indicator is most often used within another component to indicate the loading state. A container (even
app-, and page-level) can be “activated” by setting
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,
.fd-spinner[aria-hidden="false"], once the content is loaded, toggle to false and true respectively.