Spinners in Bootstrap

Learn how to use Bootstrap spinners to indicate loading or processing states.

1. What are Spinners?

Spinners are visual indicators used to show that a process is ongoing, such as data loading or page transitions.

  • Bootstrap provides built-in spinner components for easy use.
  • They can be circular or text-based.
  • Ideal for asynchronous operations and enhancing user experience.

2. Basic Spinner

Create a basic spinner using the .spinner-border class:

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

3. Text Spinner

Use .spinner-grow for a growing spinner effect:

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

4. Custom Colors

Change the color of spinners using Bootstrap's contextual color classes:

<div class="spinner-border text-primary" role="status"></div>
<div class="spinner-border text-danger" role="status"></div>

5. Sizes of Spinners

Adjust the size of spinners with size modifiers:

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

Use custom CSS for larger spinners:

.spinner-large {
    width: 4rem;
    height: 4rem;
}
<div class="spinner-border spinner-large" role="status"></div>

6. Alignment of Spinners

Use flex utilities to center spinners horizontally or vertically:

<div class="d-flex justify-content-center">
    <div class="spinner-border" role="status"></div>
</div>
<div class="d-flex align-items-center">
    <div class="spinner-border" role="status"></div>
</div>

7. Adding Labels

Include a label alongside the spinner for better context:

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

8. Using Spinners in Buttons

Add spinners inside buttons to indicate loading states:

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

9. Accessibility Features

Ensure accessibility by using the role="status" and aria-hidden="true" attributes for spinners.

10. Animated Spinners

Leverage CSS animations for continuous spinning:

.spinner-rotate {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

11. Real-World Applications

  • Loading screens for dashboards.
  • File uploads or downloads.
  • Page transitions in single-page applications.

12. Combining Spinners with Modals

Use spinners inside modals for loading dialogs:

<div class="modal fade" id="loadingModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body text-center">
                <div class="spinner-border" role="status"></div>
                <p>Loading, please wait...</p>
            </div>
        </div>
    </div>
</div>

13. Custom Spinner Designs

Create custom spinners by overriding default styles:

.custom-spinner {
    border: 5px solid rgba(0, 0, 0, 0.1);
    border-top-color: #007bff;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}
<div class="custom-spinner"></div>

14. Spinners with Tooltips

Add tooltips to provide additional information:

<div class="spinner-border" data-bs-toggle="tooltip" title="Loading data" role="status"></div>

15. Additional Resources