Bootstrap 5 Spinner
Bootstrap 5 spinners are CSS-only loading indicators that communicate to users that an operation is in progress. Two variants are available: border (rotating ring) and grow (pulsing circle). Both are accessible and work without JavaScript.
Primary Class
.spinner-border / .spinner-growCommon Use Cases
- →Button loading state on form submit
- →Page loading overlay
- →AJAX content loading indicator
- →File upload progress indicator
- →Authentication check indicator
Variants & Classes
| Variant | Description |
|---|---|
| Border spinner | Rotating ring — the classic loading indicator. |
| Growing spinner | Pulsing expanding circle. |
| Small spinner | Compact spinner for buttons. |
| Coloured spinners | Use text colour utilities to colour the spinner. |
| Button loading state | Spinner inside a disabled button. |
Code Example
<!-- Button loading state -->
<button class="btn btn-primary" type="button" disabled id="submitBtn">
<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
Generating...
</button>
<!-- Full page loading overlay -->
<div class="d-flex justify-content-center align-items-center py-5">
<div class="spinner-border text-primary" style="width:3rem;height:3rem;" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<!-- Colour variants -->
<div class="d-flex gap-3">
<div class="spinner-border text-primary" role="status"></div>
<div class="spinner-border text-success" role="status"></div>
<div class="spinner-border text-danger" role="status"></div>
<div class="spinner-grow text-warning" role="status"></div>
</div>Live Examples
Button Loading State
Primary button with inline spinner and loading text.
Colour Variants
Border and grow spinners in multiple contextual colours.
Canvas Framework Variants
The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:
- ✓Full-page loading overlay with spinner
- ✓Inline loading state in search results
- ✓Card skeleton loader placeholder
- ✓Multi-spinner parallel operation indicator
Best Practices
Always include visually-hidden text for accessibility
Spinners are visual-only. Add a span.visually-hidden inside every spinner with descriptive text ('Loading...' or 'Uploading file...'). This is announced to screen readers while being hidden from sighted users.
Disable the triggering button while loading
When a spinner is shown in a button, add the disabled attribute to prevent duplicate form submissions. Re-enable the button when the operation completes or fails.