Bootstrap Spinners

Loading animations let users know that a process is happening in the background (like saving data or fetching API records). Bootstrap 5 provides gorgeous, pure-CSS loading Spinners out of the box so you never need to import heavier third-party GIF files.

---

1. The Border Spinner

The most common Bootstrap loader is the .spinner-border class. This immediately renders a lightweight, endless rotating circle.

<!-- A pure HTML endless rotating ring -->
<div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
</div>

---

2. Contextual Colors

Bootstrap spinners natively use standard text-color classes! You just add .text-primary, .text-success, or .text-danger onto the exact same div to change the loading ring's color.

<!-- Make the spinner explicitly Green -->
<div class="spinner-border text-success" role="status">
    <span class="visually-hidden">Loading...</span>
</div>

---

3. The Growing Spinner

If you don't like the spinning ring, Bootstrap offers an alternative "radar pulse" style loader called the .spinner-grow class. It rapidly grows and perfectly fades into the background repeatedly.

This class accepts all the exact same color utilities as its border equivalent.

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

---

4. Spinner Sizes

By applying .spinner-border-sm or .spinner-grow-sm, you can immediately shrink the loading icon down to a compact size, making it suitable for inserting tightly alongside text.

<div class="spinner-border spinner-border-sm" role="status"></div>

---

5. Buttons inside Spinners

One of the single most powerful architectural designs in web development is disabling a Submit Button while loading! Combining Spinners and standard Bootstrap Buttons allows you to vividly establish this UI rule.

We combine a Button class (.btn), a Disabled State (disabled attribute), and a Small Spinner class (.spinner-border-sm) completely natively!

<!-- Ensure the button is physically set to 'disabled' -->
<button class="btn btn-primary" type="button" disabled>
    <!-- Render the tiny spinner INLINE with the text -->
    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
    Authenticating...
</button>