Loading spinner

Skip links and keyboard navigation

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.

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>