Skip to main content

Bootstrap Spinners

Bootstrap Spinners

Bootstrap provides spinners, also known as loading indicators or activity indicators, to visually represent the loading state of content or processes on web pages. Spinners are animated and can be customized to match the overall design of the website. Here's how to use Bootstrap spinners:

1. Basic Spinner

To create a basic spinner, use the spinner-border class:

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

The role="status" attribute is used for accessibility purposes.

2. Colored Spinners

You can customize the color of the spinner using Bootstrap contextual classes:

  • spinner-border text-primary
  • spinner-border text-secondary
  • spinner-border text-success
  • spinner-border text-danger
  • spinner-border text-warning
  • spinner-border text-info
  • spinner-border text-light
  • spinner-border text-dark

3. Sizing Spinners

You can adjust the size of the spinner using the spinner-border-sm and spinner-border-lg classes for small and large spinners, respectively.

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

4. Growing Spinner

You can create a growing spinner using the spinner-grow class:

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

Conclusion

Bootstrap spinners offer a simple yet effective way to indicate loading or processing states on web pages. By applying various classes and styles, developers can customize the appearance and behavior of spinners to align with the overall design of their websites.

Comments

Post a Comment