Spinner Sizes
Pure Admin's .pa-spinner only ships two sizes: the default and --xs.
Earlier versions of these docs advertised sm, md, lg, xl and 2xl modifiers — those CSS rules don't exist in core,
so they all rendered at the default size. Use <Loader type="ring" size="lg" /> (or one of the other animated loaders below) when you need a bigger indicator.
.pa-spinner
default (1rem)
.pa-spinner--xs
0.75rem
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
Grid Loader
.pa-loader-grid
Ripple Loader
.pa-loader-ripple
Dual Ring Loader
.pa-loader-dual-ring
Spinner (Default)
.pa-spinner
Usage Examples
Basic Spinner
<Spinner />
Smaller Spinner
<Spinner size="xs" />
Colored Spinner
<Spinner variant="primary" />
Centered Loader with Overlay
<LoaderOverlay> <Loader type="ring" size="lg" variant="primary" /> </LoaderOverlay>
Centered Loader with Text
<LoaderCenter> <Loader type="ring" size="lg" variant="primary" /> <Paragraph class="mt-4">Loading...</Paragraph> </LoaderCenter>
Loader Types
<Loader type="dots" size="lg" variant="primary" /> <Loader type="bars" size="lg" variant="success" /> <Loader type="pulse" size="lg" variant="danger" /> <Loader type="ring" size="lg" variant="warning" /> <Loader type="wave" size="lg" variant="info" /> <Loader type="grid" size="lg" variant="primary" /> <Loader type="ripple" size="lg" variant="success" /> <Loader type="dual-ring" size="lg" variant="danger" />