Spin Loader

Size Variants (Primary)

4 sizes: xs (16px), sm (20px), md (24px), lg (28px)

<div class="elv-spin-loader elv-spin-loader--md elv-spin-loader--primary">
  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22" stroke-width="2.5" stroke-linecap="round"/>
  </svg>
</div>

Color Variants

3 color treatments: primary (purple), neutral (gray), inverted (white)

<!-- Primary (purple) -->
<div class="elv-spin-loader elv-spin-loader--md elv-spin-loader--primary">
  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22" stroke-width="2.5" stroke-linecap="round"/>
  </svg>
</div>

<!-- Neutral (gray) -->
<div class="elv-spin-loader elv-spin-loader--md elv-spin-loader--neutral">
  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22" stroke-width="2.5" stroke-linecap="round"/>
  </svg>
</div>

<!-- Inverted (white for dark backgrounds) -->
<div class="elv-spin-loader elv-spin-loader--md elv-spin-loader--inverted">
  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22" stroke-width="2.5" stroke-linecap="round"/>
  </svg>
</div>

In Context

Common usage patterns for loading states

Usage Guidelines

• Size Selection: Use xs/sm for inline loading, md for cards, lg for full-page loading
• Color Choice: Primary for branded contexts, neutral for subtle loading, inverted for dark backgrounds
• Placement: Center loaders in their container for best visual balance
• Timing: Show loader after 300-500ms delay to avoid flashing on fast loads
• Context: Always pair with descriptive text when possible ("Loading...", "Saving changes...")

Accessibility Notes

• ARIA: Add role="status" and aria-live="polite" to loading containers
• Screen Readers: Include visually-hidden text like "Loading" for screen reader users
• Focus Management: Prevent interaction with loading content by disabling or removing from tab order
• Animation: Respect prefers-reduced-motion by pausing animation for users who need it

<div role="status" aria-live="polite">
  <div class="elv-spin-loader elv-spin-loader--md elv-spin-loader--primary">
    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22" stroke-width="2.5" stroke-linecap="round"/>
    </svg>
  </div>
  <span class="elv-sr-only">Loading content</span>
</div>

Reduced Motion Support

For users who prefer reduced motion, pause the animation

@media (prefers-reduced-motion: reduce) {
  .elv-spin-loader {
    animation: none;
    /* Show static version or pulse instead */
  }
}

Design System Specs