Examples
Basic usage
<span class="spinner" role="status" aria-label="Loading"></span>
Size
<div class="cluster is-snug">
<span class="spinner is-sm" role="status" aria-label="Loading"></span>
<span class="spinner" role="status" aria-label="Loading"></span>
<span class="spinner is-lg" role="status" aria-label="Loading"></span>
<span class="spinner is-xl" role="status" aria-label="Loading"></span>
</div>
Color
<div class="cluster">
<span class="spinner is-lg" role="status" aria-label="Loading"></span>
<span class="spinner is-lg is-primary" role="status" aria-label="Loading"></span>
<span class="spinner is-lg is-accent" role="status" aria-label="Loading"></span>
</div>
Inline with text
Fetching your data
Loading dashboard
Saving draft<div class="flow">
<p class="cluster">
Fetching your data <span class="spinner" aria-hidden="true"></span>
</p>
<h3 class="cluster">
Loading dashboard <span class="spinner" aria-hidden="true"></span>
</h3>
<small class="cluster"
>Saving draft <span class="spinner" aria-hidden="true"></span
></small>
</div>
Source comments
Spinner -- CSS-only loading indicator
Shares the spin keyframe from animations.css with .button[aria-busy].
Reference
Source: src/css/spinner.css
Applies to
.spinner
Classes
| Class | Kind | Description |
|---|---|---|
.is-sm | variant | Smaller spinner at 1em |
.is-lg | variant | Larger spinner at 2rem with thicker ring |
.is-xl | variant | Extra-large spinner at 3rem with thicker ring |
.is-primary | variant | Primary color arc |
.is-accent | variant | Accent color arc |
Tokens
| Token | Default | Description |
|---|---|---|
--spinner-size | 1.25em | Diameter of the spinner |
--spinner-width | 2px | Border thickness of the spinner ring |
--spinner-color | currentColor | Color of the spinning arc |
--spinner-track | var(--color-shadow) | Color of the background track |
--spinner-speed | 0.6s | Duration of one full rotation |