How to create & use Bootstrap 5 spinners easily?

Bootstrap 5 Spinners

Bootstrap 5 spinners show the loading state of the components.

Steps to create bootstrap 5 spinners.

• Add .spinner-border to spinner loader container.

General Syntax

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

Source Code

<div class="container">
  <h2 class="text-center mt-4 mb-4">Spinners</h2>
  <div class="row">
    <div class="col-12 col-sm-8 offset-sm-2 mt-4">
      <div class="spinner-border">
        <span class="visually-hidden">Loading...</span>
      </div>
    </div><!--/offset-sm-2-->
  </div><!--/row-->
</div><!--/container-->

Colored Spinners

Steps To create bootstrap 5 colored spinners, use text color utility classes.

• Add .spinner-border to spinner loader container.
• To create a colored spinner, use .text-* the spinner container.
• Following are the text utilities color classes:.text-primary,.text-secondary,.text-success,.text-danger,.text-warning,.text-info,.text-light,,text-dark.

General Syntax

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

Source Code

<div class="container mt-5">
  <h2 class="text-center mt-5 mb-4">Spinners</h2>
  <div class="row">
    <div class="col-4 col-sm-4">
      <div class="spinner-border text-primary" role="status">
        <span class="visually-hidden">Loading...</span>
      </div>
    </div> <!--/column-->
    <div class="col-4 col-sm-4">
      <div class="spinner-border text-secondary" role="status">
        <span class="visually-hidden">Loading...</span>
      </div>
    </div><!--/column-->
    <div class="col-4 col-sm-4">
      <div class="spinner-border text-success" role="status">
        <span class="visually-hidden">Loading...</span>
      </div>
    </div><!--/column-->
  </div><!--/row-->
</div><!--/container-->

Growing Spinner

Growing spinners glow repeatedly after a certain time duration. It does not spin. To make a growing spinner, add .spinner-grow to the spinner container base class.

General Syntax

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

Source Code

<div class="container">
  <h2 class="my-5">Growing Spinners</h2>
  <div class="spinner-grow" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

Colored Growing Spinner

Steps to create colored growing spinners.

• Add .spinner-grow to spinner loader container.
• To create a colored spinner, add additional .text-* to the spinner container.
• Following are the text utilities color classes:.text-primary,.text-secondary,.text-success,.text-danger,.text-warning,.text-info,.text-light,.text-dark.

General Syntax

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

Source Code

<div class="container text-center">
  <h2 class="my-5">Colored Growing Spinner</h2>
  <div class="row">
    <div class="col-4 col-sm-4">
      <div class="spinner-grow text-primary" role="status">
        <span class="visually-hidden">Loading...</span>
      </div>
    </div> <!--column-->
    <div class="col-4 col-sm-4">
      <div class="spinner-grow text-secondary" role="status">
        <span class="visually-hidden">Loading...</span>
      </div>
    </div><!--column-->
    <div class="col-4 col-sm-4">
      <div class="spinner-grow text-success" role="status">
        <span class="visually-hidden">Loading...</span>
      </div>
    </div><!--column-->
  </div><!--/row-->
</div><!--/container-->

To read more about Bootstrap 5 spinner, click here.