Spinner

Loading indicator for actions or regions that may take noticeable time.

  • Most actions do not need a spinner. Use disabled alone for fast actions or to prevent duplicate submissions.
  • Use aria-busy="true" with a loading label for actions that are visibly in progress.
  • Add .spinner only when the operation may take long enough that users need explicit loading feedback.
  • The spinner uses currentColor, so it adapts to its context.
  • Decorative spinners should be aria-hidden="true".
  • Use role="status" with accessible text when the loading state needs to be announced.
  • Put a direct last-child .spinner inside a busy region to show a centered loading overlay. In buttons, spinners remain inline.
<span class="spinner"></span>
<span class="spinner sm primary"></span>
<span class="spinner lg danger"></span>
<button class="btn primary" type="submit" aria-busy="true" disabled>
  <span class="spinner" aria-hidden="true"></span>
  Saving…
</button>

Card Title

Card description goes here.

This is the card content. It can contain any HTML.

<article class="card" aria-busy="true" aria-label="Loading card content">
  <hgroup>
    <h3>Card Title</h3>
    <p class="muted">Card description goes here.</p>
  </hgroup>

  <p>This is the card content. It can contain any HTML.</p>

  <footer class="cluster">
    <button class="btn outline" disabled>Cancel</button>
    <button class="btn" disabled>Save</button>
  </footer>

  <span class="spinner lg" aria-hidden="true"></span>
</article>
Loading results 
<div role="status">
  <span class="spinner" aria-hidden="true"></span>
  <span class="sr-only">Loading results</span>
</div>