Loading Spinner / Busy Indicator

Available since 1.0.0

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

Loading Spinner

  • Use aria-hidden attribute is used to hide and show the element.
  • Default size is medium. To render small or large size, --small and --large modifier are avialable.
<div class="fd-loading-spinner fd-loading-spinner--small" aria-hidden="false" aria-label="Loading"></div>
<div class="fd-loading-spinner" aria-hidden="false" aria-label="Loading"></div>
<div class="fd-loading-spinner fd-loading-spinner--large" aria-hidden="false" aria-label="Loading"></div>

Loading Dots

  • Use aria-hidden attribute is used to hide and show the element.
<div class="fd-loading-dots" aria-hidden="false" aria-label="Loading">
    <div></div>
    <div></div>
    <div></div>
</div>


Spinner (deprecated)

Note: fd-spinner has been deprecated in favor of fd-loading-spinner and fd-loading-dots The loading element is used to display the loading indicator animation.

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