bootstrap 4:BS Spinner

Bootstrap 4 Spinners

Bootstrap 4 spinners show the loading state of the components.

Steps to create bootstrap 4 spinners.

Add .spinner-border to the spinner loader container base class.

Example

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Bootstrap Spinner

Note:Bootstrap spinner is used to show loading state of the web componet inside the web project.

Bootstrap spinners are used to show the loading state of the web component.

Colored Spinners

Follow the following steps to create bootstrap 4 colored spinners.

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

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Colored Spinners

Remember: Bootstrap provides different text utilities classes that is used to provide different color to the spinners.

Growing spinner

Growing spinners glows repeatedly after a certain time duration.It does not spin.To make growing spinner,add .spinner-grow tp spinner container.

Example

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Growing Spinners

Note: To create growing spinner,assign .spinner-grow to the spinner container.

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

Try it now

Source Code : Output

Growing Spinners

Note: Use bootstrap text utility classes to make colorful growing spinners.

Spinner Size

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

Example

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Spinner Size

Note: In the above example, use .spinner-grow-sm or .spinner-border-sm to make smaller spinner size.

Spinner Buttons

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

General Syntax

Try it now

Source Code

<div class="container text-center mt-4"> 
       
      <h2 class="text-center my-5">Spinner Buttons </h2>     

    <div class="row">

     <div class="col mb-2">

        <button class="btn btn-primary">

          <span class="spinner-border spinner-border-sm"></span>

        </button>
        
      </div>

      <div class="col mb-2">

         <button class="btn btn-primary">

              <span class="spinner-border spinner-border-sm"></span>

          Loading..

        </button>
        
      </div>

      <div class="col mb-2">
           

        <button class="btn btn-primary" disabled>

          <span class="spinner-border spinner-border-sm"></span>

          Loading..

        </button>


      </div>

      <div class="col mb-2">

         <button class="btn btn-primary" disabled>

          <span class="spinner-grow spinner-grow-sm"></span>

          Loading..

        </button>
        
      </div>

   </div>
  
  </div><!--/container-->

Try it now

Source Code : Output

Spinner Buttons

Note: Spinner button can be created easily by assigning spinner inside the button.