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...”.
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>