Bootstrap 5 Spinners

Bootstrap 5 spinners show the loading state of the components.

Example

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>

Try it now

Source Code

          <div class="container">
  <b class="text-center mt-4 mb-4">Spinners</b>
  <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-->

Try it now

Colored Spinners

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

Add .spinner-border class to the spinner loader container.
To create colored spinner, use .text-* class 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.

Example

General Syntax

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

Try it now

Source Code

          <div class="container mt-5">
  <b class="text-center mt-5 mb-4">Spinners</b>
  <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-->

Try it now

Code Explanation

To change the spinner's background color, add .text-* utility class to the spinner container base class.

Growing Spinner

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

Example

General Syntax

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

Try it now

Source Code

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

Try it now

Colored Growing Spinner

Steps to create a colored growing spinners.

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

Example

General Syntax

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

Try it now

Source Code

          <div class="container text-center">
  <b class="my-5">Colored Growing Spinner</b>
  <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-->

Try it now

Spinner: Size

To create a Bootstrap 5 smaller spinners, use either .spinner-border-sm or .spinner-grow-sm class.

Example

Smaller Spinner

Large Spinner

Source Code

          <!-- Smaller spinner size -->
<div class="spinner-border spinner-border-sm" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<!-- Large spinner size -->
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Try it now

Spinner Buttons

To create a spinner button, place .spinner-border element within the <button> element.

Example

General Syntax

      <button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
</button>

Try it now

Source Code

          <div class="container">
  <b class="text-center my-5">Spinner Buttons</b>
  <div class="row">
    <div class="col">
      <button class="btn btn-primary">
        <span class="spinner-border spinner-border-sm"></span>
      </button>
    </div>
    <div class="col">
      <button class="btn btn-primary">
        <span class="spinner-border spinner-border-sm"></span>
        Loading
      </button>
    </div>
  </div><!--/row-->
</div><!--/container-->

Try it now

Spinners: Alignment

Bootstrap 5 spinners can be aligned by following rules:

Spinner Spacing

Margin utility classes are used to provide the spacing for the spinner.

Example

Source Code

          <div class="container">
  <h2 class="text-center">Spinner Spacing</h2>
  <div class="spinner-border mt-5">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

Try it now

Spinner Placement

flexbox utilities, float utilities, or text alignment are very helpful utility classes that placed spinner anywhere on the web page.

Using Flex

Example

Horizontally Spinner Center Alignment

Vertically Center Alignment

General Syntax

      <div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>
<div class="d-flex align-items-center">
  <strong>Loading...</strong>
  <div class="spinner-border ml-auto"></div>
</div>

Try it now

Source Code

          <div class="container mt-5">
  <b class="text-center my-5">Horizontally Spinner Center Alignment</b>
  <div class="d-flex justify-content-center bg-light custom-height">
    <div class="spinner-border">
      <span class="visually-hidden">Loading...</span>
    </div>
  </div>
  <b class="my-5">Vertically Center Alignment</b>
  <div class="d-flex align-items-center bg-light custom-height">
    <strong class="visually-hidden">Loading...</strong>
    <div class="spinner-border ml-auto" ></div>
  </div>
</div>

Try it now

Code Explanation

Spinner can be placed anywhere on the web page using flexbox utilities, float utilities, or text alignment.

Spinner Alignment Using Float

Spinner can also be placed either on the left or right using the float utility classes. To place the spinner on the right, use the .float-right class & to left, use the .float-left class.

Example

Spinner Alignment

General Syntax

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

Try it now

Source Code

          <div class="container">
  <b class="text-center">Spinner Placement</b>
  <div class="clearfix">
    <div class="spinner-border float-start" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
  </div>
</div><!--/container-->

Try it now

Spinner Center Alignment

Spinner can also be placed in the center using the text utility classes.

Example

Spinner Center Alignment

General Syntax

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

Try it now

Source Code

          <div class="container mt-5">
  <b class="text-center my-4">Spinner Center Alignment</b>
  <div class="text-center">
    <div class="spinner-border" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
  </div>
</div>

Try it now

Online Test / Quiz

Question set 1

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4