Basic Spinner

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

Sized Spinner

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

Colored Spinner

<div class="pa-spinner pa-spinner--lg pa-spinner--primary"></div>

Centered Loader with Overlay

<div class="pa-loader-overlay">
  <div class="pa-spinner pa-spinner--xl"></div>
</div>

Centered Loader with Text

<div class="pa-loader-center">
  <div class="pa-spinner pa-spinner--lg"></div>
  <p class="mt-4">Loading...</p>
</div>

Dots Loader

<div class="pa-loader-dots">
  <span></span>
  <span></span>
  <span></span>
</div>

Bars Loader

<div class="pa-loader-bars">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

Pulse Loader

<div class="pa-loader-pulse"></div>

Ring Loader

<div class="pa-loader-ring"></div>

Wave Loader

<div class="pa-loader-wave">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

Spinner

• pa-spinner - Base spinner (border-based rotation)
• pa-spinner--xs - Extra small
• pa-spinner--sm - Small (default)
• pa-spinner--md - Medium
• pa-spinner--lg - Large
• pa-spinner--xl - Extra large
• pa-spinner--2xl - 2x extra large

Spinner Colors

• pa-spinner--primary - Primary/accent color
• pa-spinner--secondary - Secondary/muted
• pa-spinner--success - Success (green)
• pa-spinner--danger - Danger (red)
• pa-spinner--warning - Warning (yellow)
• pa-spinner--info - Info (blue)

Loader Types

• pa-loader-dots - Three bouncing dots (needs 3 <span>)
• pa-loader-dots--lg - Large dots
• pa-loader-bars - Five scaling bars (needs 5 <span>)
• pa-loader-bars--lg - Large bars
• pa-loader-pulse - Pulsing circle
• pa-loader-pulse--lg - Large pulse
• pa-loader-ring - Double-arc spinning ring
• pa-loader-ring--lg - Large ring
• pa-loader-wave - Five wave bars (needs 5 <span>)
• pa-loader-wave--lg - Large wave

Loader Utilities

• pa-loader-overlay - Semi-transparent overlay (absolute positioned)
• pa-loader-center - Flex container for centering loader + text