Loading Spinner

Use loading spinners to indicate that content is loading or an action is being processed.

Default Spinner

<div class="spinner"></div>

Spinner Sizes

<div class="spinner spinner-sm"></div>
<div class="spinner"></div>
<div class="spinner spinner-lg"></div>

Spinner with Text

<div style="display: flex; align-items: center; gap: var(--space-3);">
  <div class="spinner"></div>
  <span class="loading-text">Loading...</span>
</div>

Spinner in Button

<button class="btn btn-primary" disabled>
  <div class="spinner spinner-sm"></div>
  Submitting...
</button>

Loading Overlay

Use a loading overlay to block interaction with the entire page during critical operations.

<div class="loading-overlay">
  <div class="spinner spinner-lg"></div>
  <span class="loading-text">Processing your request...</span>
</div>

When to Use

Use a spinner when:

• Loading content asynchronously
• Submitting a form
• Processing a payment
• Any operation that takes noticeable time

Don't use a spinner when:

• Content loads very quickly (under 300ms)
• You can show skeleton content instead
• The user doesn't need to wait

Usage Guidelines

Do

• Show a spinner after a short delay (300-500ms)
• Include text explaining what's happening
• Use appropriate sizes for the context
• Disable interactive elements during loading

Don't

• Don't show spinners for instant operations
• Don't use multiple spinners on the same page
• Don't leave spinners indefinitely (add timeouts)

Accessibility

• Add role="status" and aria-live="polite" for screen readers
• Include loading text that screen readers can announce
• Ensure sufficient motion contrast
• Consider users with vestibular disorders (reduced motion)

CSS Classes

/* Spinner */
.spinner { }
.spinner-sm { }
.spinner-lg { }

/* Loading overlay */
.loading-overlay { }
.loading-text { }