Skip links and keyboard navigation

For government agency options have changed in line with the November 2024 Machinery of government (MoG). For more information, see our MoG change guide.

SWE components

Loading spinner

On this page

Overview

Use a loading spinner to indicate there is a wait time while an action is occurring.

  • Place the loading spinner in the part of the page that is loading.
  • The loading spinner label should accurately explain the action that is occurring. For example, “Loading...”, “Submitting...”, “Saving...”, “Processing...”.

Default

By default the loading spinner is left aligned.

View example in Storybook

Code

<div class="qg-spinner" role="status">
  <div class="spinner-border"></div>
  <div class="qg-spinner-label">
    Loading...
  </div>
</div>

Center aligned

If required, you can horizontally center the loading spinner using the class align-center .

View example in Storybook

The loading spinner can also be centered both horizontally and vertically in a container with a defined height using the class qg-absolute-center .

View example in Storybook

Code

<!-- Horizontally centered -->
    
<div class="qg-spinner align-center" role="status">
  <div class="spinner-border"></div>
  <div class="qg-spinner-label">
    Loading...
  </div>
</div>

<!-- Horizontally and vertically centered (absolute center) -->

<div style="min-height: 300px;">
  <div class="qg-spinner qg-absolute-center" role="status">
    <div class="spinner-border"></div>
    <div class="qg-spinner-label">
      Loading...
    </div>
  </div>
</div>
Last updated:
28 June 2024