Spinner

Spinners indicate loading states for components or pages.

Usage

Use spinners for brief loading states. For longer operations, consider progress bars with status text.

Basic Spinner

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

Sizes

<div class="df-spinner df-spinner--xs"></div>
<div class="df-spinner df-spinner--sm"></div>
<div class="df-spinner"></div>
<div class="df-spinner df-spinner--lg"></div>
<div class="df-spinner df-spinner--xl"></div>

Colors

<div class="df-spinner df-spinner--primary"></div>
<div class="df-spinner df-spinner--secondary"></div>
<div class="df-spinner df-spinner--success"></div>

On Dark Background

<div class="df-spinner df-spinner--light"></div>

With Text

Loading...

<div class="df-spinner-container">
  <div class="df-spinner"></div>
  <span>Loading...</span>
</div>

Button with Spinner

<button class="df-button df-button--primary df-button--loading" disabled>
  <div class="df-spinner df-spinner--button"></div>
  Saving...
</button>

Overlay Spinner

Content Title

This content is being loaded. The overlay covers the entire container.

<div class="content-container">
  <div class="df-spinner-overlay">
    <div class="df-spinner df-spinner--lg"></div>
  </div>
  <!-- Content here -->
</div>

Page Loader

For full-page loading states:

<div class="df-page-loader">
  <div class="df-spinner df-spinner--xl"></div>
  <span>Loading application...</span>
</div>

Inline Spinner

Checking availability

<p>
  Checking availability
  <span class="df-spinner df-spinner--inline"></span>
</p>

Accessibility

• Use role="status" for spinner containers
• Include aria-live="polite" for dynamic updates
• Provide screen reader text describing the loading state
• Consider reduced motion preferences

<div class="df-spinner-container" role="status" aria-live="polite">
  <div class="df-spinner"></div>
  <span class="sr-only">Loading content...</span>
</div>

Best Practices

• Use appropriate size for context
• Show spinners for operations > 300ms
• Provide context about what's loading
• Consider skeleton screens for content loading
• Respect prefers-reduced-motion

API Reference

Classes

Class	Description
df-spinner	Base spinner class
df-spinner--xs	Extra small (12px)
df-spinner--sm	Small (16px)
df-spinner--lg	Large (32px)
df-spinner--xl	Extra large (48px)
df-spinner--primary	Primary color
df-spinner--secondary	Secondary color
df-spinner--success	Success color
df-spinner--warning	Warning color
df-spinner--error	Error color
df-spinner--light	Light color (for dark bg)
df-spinner--button	Size for buttons
df-spinner--inline	Inline with text