Spinner Sizes
.pa-spinner--xs
0.75rem
.pa-spinner--sm
1rem (default)
.pa-spinner--md
1.5rem
.pa-spinner--lg
2rem
.pa-spinner--xl
3rem
.pa-spinner--2xl
4rem
Spinner Colors
.pa-spinner--primary
.pa-spinner--secondary
.pa-spinner--success
.pa-spinner--danger
.pa-spinner--warning
.pa-spinner--info
Inline Spinners
Loading inline content...
Processing your request...
Fetching data from server...
Centered Loaders
Loaders with Text
Loading data...
Processing...
Card Loading States
Loading Card
Loading with Text
Fetching data...
Loaded Content
Content has loaded successfully!
This is what appears after the loader completes.
Loader Types
Dots Loader
.pa-loader-dots
Bars Loader
.pa-loader-bars
Pulse Loader
.pa-loader-pulse
Ring Loader
.pa-loader-ring
Wave Loader
.pa-loader-wave
Spinner (Default)
.pa-spinner
Usage Examples
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>