🔄 Bootstrap 5 – Spinners: Show Loading Indicators with Style

🧲 Introduction – What Are Spinners in Bootstrap 5?

Spinners in Bootstrap 5 are visual indicators used to show that something is loading or processing. They are lightweight, customizable, and work with both inline elements and buttons. Bootstrap offers both border spinners and growing spinners, with support for sizing, colors, and accessibility.

🎯 In this guide, you’ll learn:

• How to use border and grow spinners
• Style and size spinners with utility classes
• Use spinners inside buttons and cards
• Make spinners accessible to screen readers

---

✅ Example 1 – Basic Border Spinner

<div class="spinner-border" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

🔍 Explanation:

Element/Class	Purpose
.spinner-border	Creates a rotating border spinner
role="status"	Declares the spinner as a live region
.visually-hidden	Provides screen reader-only loading text

---

✅ Example 2 – Growing Spinner

<div class="spinner-grow" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

🔍 Use Case:

• Growing spinner expands and fades, instead of rotating.
• Use for alternate visual loading effects.

---

✅ Example 3 – Colored Spinners

Use Bootstrap contextual color classes to match your theme:

<div class="spinner-border text-primary"></div>
<div class="spinner-border text-success"></div>
<div class="spinner-grow text-danger"></div>
<div class="spinner-grow text-warning"></div>

Class	Color
text-primary	Blue (default)
text-success	Green
text-danger	Red
text-warning	Yellow/Orange

---

✅ Example 4 – Spinner Sizes

<div class="spinner-border spinner-border-sm"></div>
<div class="spinner-grow spinner-grow-sm"></div>

• Use .spinner-border-sm or .spinner-grow-sm for smaller spinners.
• To make larger spinners, simply apply a custom width/height:

<div class="spinner-border" style="width: 3rem; height: 3rem;"></div>

---

✅ Example 5 – Spinners Inside Buttons

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>

🔍 Use Case:

• Show real-time loading inside forms or on submission buttons.
• Add disabled to prevent multiple clicks.

---

🛠️ Best Practices for Using Spinners

Best Practice	Why It Helps
Pair with real actions (AJAX, form)	Avoid using spinners as decoration only
Use small spinners in tight spaces	Keeps layout clean and responsive
Provide accessible text (visually-hidden)	Ensures screen readers announce loading status
Don’t overuse in place of progress bars	Use progress bars when measurable progress exists

---

📌 Summary – Indicate Processing with Bootstrap Spinners

Bootstrap 5 spinners offer a clean, lightweight way to show activity or loading states. With minimal markup and full utility class support, you can add them anywhere—buttons, modals, cards, or forms.

🔍 Key Takeaways:

• Choose between .spinner-border and .spinner-grow
• Use text-* classes to color-match spinners
• Apply .spinner-border-sm for smaller versions
• Combine with disabled buttons for async actions
• Always add accessible text (.visually-hidden)

⚙️ Ideal for AJAX loaders, submit buttons, system updates, and modal loaders.

---

❓ FAQs – Bootstrap 5 Spinners

❓ What is the difference between spinner-border and spinner-grow?
✅ spinner-border shows a rotating circle; spinner-grow animates via pulsing fade-in and expansion.

---

❓ Can I change the size of a Bootstrap spinner?
✅ Yes. Use .spinner-border-sm or set custom width/height styles.

---

❓ Are Bootstrap spinners accessible?
✅ Yes—if paired with a hidden <span class="visually-hidden">Loading...</span> for screen readers.

---

❓ Can I use spinners inside buttons?
✅ Absolutely. Place the spinner inside the button and optionally add text.

---

Share Now :