Learn with us

In Bootstrap 5, spinners are used to indicate that content is loading or processing. They provide a visual representation of an ongoing task. Here’s how you can create spinners in Bootstrap 5:

1. Basic Spinner:

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

2. Spinner with Different Sizes:

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

<div class="spinner-border" 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>

3. Growing Spinner:

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

4. Growing Spinner with Different Sizes:

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

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

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

You can customize the spinners by adding different classes like spinner-border or spinner-grow to create different styles. Additionally, you can adjust the size of the spinners by applying classes like spinner-border-sm or spinner-border-lg for the border-style spinner, and spinner-grow-sm or spinner-grow-lg for the growing spinner.

Feel free to use spinners in your web pages or applications to indicate ongoing processes or loading states. For more details and additional options related to spinners in Bootstrap 5, refer to the official Bootstrap documentation.