Skip links and keyboard navigation

SWE components

Loading spinner

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 .

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

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:
24 August 2022