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

Try it now

Source Code

Try it now

Source Code : Output

Spinners

Code Explanation

Note:Follow the above mention step to create bootstrap spinner.

Colored Spinners

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

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

Example

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Spinners

Code Explanation

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.

Example

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Growing Spinners

Code Explanation

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

Colored Growing Spinner

Steps to create colored growing spinners.

Add .spinner-grow to spinner loader container.
To create 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.

Example

General Syntax

Try it now

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

Try it now

Source Code : Output

Colored Growing Spinner

Code Explanation

Note:Follow the above mention concept to create colored growing spinners.

Bootstrap 5 Spinners: Size

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

Example

Smaller Spinner

Large Spinner

General Syntax

Try it now

Source Code

Try it now

Code Explanation

Note: Follow the above mention steps to create larger and smaller spinner size.

Spinner Buttons

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

Example

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Spinner Buttons

Code Explanation

Note:Follow the above mention steps to create spinner button.

Bootstrap 5 Spinners: Alignment

Bootstrap 5 spinners can be aligned by following rules:

Spinner Spacing

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

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Spinner Spacing

Code Explanation

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

Try it now

Source Code

Try it now

Source Code : Output

Horizontally Spinner Center Alignment

Vertically Center Alignment

Code Explanation

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

Bootstrap 5 Spinners

General Syntax

Source Code

Source Code : Output

Spinners

Code Explanation

Colored Spinners

Example

General Syntax

Source Code

Source Code : Output

Spinners

Code Explanation

Growing Spinner

Example

General Syntax

Source Code

Source Code : Output

Growing Spinners

Code Explanation

Colored Growing Spinner

Example

General Syntax

Source Code

Source Code : Output

Colored Growing Spinner

Code Explanation

Bootstrap 5 Spinners: Size

Example

Smaller Spinner

Large Spinner

General Syntax

Source Code

Code Explanation

Spinner Buttons

Example

General Syntax

Source Code

Source Code : Output

Spinner Buttons

Code Explanation

Bootstrap 5 Spinners: Alignment

Spinner Spacing

General Syntax

Source Code

Source Code : Output

Spinner Spacing

Code Explanation

Spinner Placement

Flex

General Syntax

Source Code

Source Code : Output

Horizontally Spinner Center Alignment

Vertically Center Alignment

Code Explanation

Spinner Alignment Using Float

General Syntax

Source Code

Source Code : Output

Spinner Placement

Code Explanation

Spinner Center Alignment

General Syntax

Source Code

Code Explanation

Online Test / Quiz

Our Tutorials