Bootstrap 5Feedback

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-grow

Common 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	Classes
Border spinner	Rotating ring — the classic loading indicator.	`spinner-border`
Growing spinner	Pulsing expanding circle.	`spinner-grow`
Small spinner	Compact spinner for buttons.	`spinner-border spinner-border-sm`
Coloured spinners	Use text colour utilities to colour the spinner.	`spinner-border text-primary / text-success / text-danger`
Button loading state	Spinner inside a disabled button.	`btn disabled + spinner-border-sm + Loading...`

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>

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.

FAQ

How do I change the size of a Bootstrap 5 spinner?

Use spinner-border-sm for a compact button-sized spinner. For larger spinners, use inline styles: style='width:3rem;height:3rem;'. There's no XL variant class by default.