Bootstrap 5 Spinners

Bootstrap 5 spinners show the loading state of the components.

Steps to create bootstrap spinner.

Step: 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 text-center my-5">
  <div class="spinner-border">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

Try it yourself

Source Code : Output

Colored Spinners

Step To create colored spinners,use text color utilities classes.

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

Try It Now

Source Code

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

Try it yourself

Source Code : Output

Note: To create different background color to the spinner,assign .text-* utility class to the spinner container base class.

Growing Spinner

Growing spinners glows repeatedly after a certain time duration.It does not spin.To make 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>

Try It Now

Source Code

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

Try it yourself

Source Code : Output

Note:To make growing spinner, add .spinner-grow class to the spinner container base class.

Colored Growing Spinner

Steps to create colored growing spinners.

Step1: Add .spinner-grow to spinner loader container.
Step2: To create colored spinner,add additional .text-* to the spinner container.
Step3: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>

Try It Now

Source Code

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

Try it yourself

Source Code : Output

Spinner Size

To create smaller spinner,use either .spinner-border-sm or .spinner-grow-sm class.

General Syntax

      <!-- 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

Source Code

    <div class="container text-center my-5">
  <div class="row">
    <div class="col-6 col-sm-6">
      <div class="spinner-border spinner-border-sm" role="status">
        <span class="visually-hidden">Loading...</span>
      </div>
    </div>
    <!--/first column-->
    <div class="col-6 col-sm-6">
      <div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
        <span class="visually-hidden">Loading...</span>
      </div>
    </div>
    <!--/second column-->
  </div>
  <!--/row-->
</div>
<!--/container-->

Try it yourself

Source Code : Output

Spinner Buttons

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

General Syntax

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

Try It Now

Source Code

    <div class="container my-3 text-center">
  <button class="btn btn-primary">
    <span class="spinner-border spinner-border-sm"></span>
  </button>
</div>
<!--/container-->

Try it yourself

Source Code : Output

Alignment Of Spinner

Spinner Spacing

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

General Syntax

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

Try It Now

Source Code

    <div class="container my-3 text-center">
  <div class="spinner-border m-5" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>
<!--/container-->

Try it yourself

Source Code : Output

Note:Margin utility classes are very helpful for providing spacing to the spinner.

Spinner Placement

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

Flex

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">
  <span class="visually-hidden">Loading...</span>
  <div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
</div>

Try It Now

Source Code

    <div class="container my-3 text-center">
  <h5 class="my-4">Center Alignment</h5>
  <div class="d-flex justify-content-center bg-info custom-height" style="min-height: 50px;">
    <div class="spinner-border" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
  </div>
  <h5 class="my-4">Vertically Center Alignment</h5>
  <div class="d-flex align-items-center bg-primary" style="min-height: 50px;">
    <span class="visually-hidden">Loading...</span>
    <div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
  </div>
</div>
<!--/container-->

Try it yourself

Source Code : Output

Center Alignment

Vertically Center Alignment

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

Spinner Alignment Using Float

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 my-3 text-center">
  <div class="clearfix">
    <div class="spinner-border float-right" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
  </div>
</div>
<!--/container-->

Try it yourself

Source Code : Output

Note:Spinner can also be placed either left or right using float.

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 my-3 text-center">
  <div class="text-center">
    <div class="spinner-border" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
  </div>
</div>
<!--/container-->

Try it yourself

Source Code : Output

Note:Spinner can also be placed in the center using text utility class.

Online Test / Quiz

Question set 1

Web Tutorials

How To Create And Use Bootstrap 5 Spinners

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS