Bootstrap 5 spinners indicate loading states in your application. This page covers 4 spinner patterns — border, grow, sizes and button loading states — each ready to copy into your project.
Quick Setup
Spinners need only Bootstrap 5 CSS:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
Key Classes Reference
| Class | What It Does |
|---|---|
.spinner-border | Circular border spinning animation |
.spinner-border-sm | Small border spinner |
.spinner-grow | Pulsing grow animation |
.spinner-grow-sm | Small grow spinner |
.text-primary | Sets spinner color to blue |
.text-danger | Sets spinner color to red |
style="width:3rem;height:3rem" | Custom spinner size |
1. Bootstrap 5 Border Spinners
The default border spinner in all Bootstrap 5 color variants.
2. Bootstrap 5 Grow Spinners
Growing dot spinner using spinner-grow. A subtle pulsing animation alternative to the border spinner.
3. Bootstrap 5 Spinner Sizes
Spinners in small, default and large sizes. Use spinner-border-sm or custom width/height.
4. Bootstrap 5 Button Loading States
Buttons with spinners for loading states. Disable the button and show a spinner while processing.
Frequently Asked Questions
Add the spinner HTML to your page and toggle its visibility using d-none and d-block classes. On form submit: spinner.classList.remove('d-none'); button.disabled = true. After response: spinner.classList.add('d-none'); button.disabled = false.
Use flexbox utilities on the wrapper: <div class='d-flex justify-content-center align-items-center' style='min-height:200px'><div class='spinner-border'></div></div>. For a full page overlay add position-fixed top-0 start-0 w-100 h-100 to the wrapper.
Use Bootstrap text color utilities: text-primary, text-success, text-danger etc. For custom colors use inline style: <div class='spinner-border' style='color:#fd4766'>. The spinner uses currentColor so setting the text color changes the spinner color.
Create a div with position-fixed top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center and a semi-transparent background: style='background:rgba(255,255,255,0.8);z-index:9999'. Add a large spinner inside and toggle visibility with JavaScript.
spinner-border creates a circular spinning ring animation. spinner-grow creates a pulsing dot that grows and fades. Both work the same way with color utilities and size modifiers. spinner-border is more commonly used, spinner-grow is subtler and good for less prominent loading states.
Need a Full Bootstrap 5 Admin Dashboard?
Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.
Browse Templates →Use code FIRST30 for 30% off your first purchase.