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

     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.

Spinner Alignment

flexbox utilities, float utilities, or text alignment are very helpful utilities class that placed spinner to any where in the web page.

Spinner Alignment Using Flex Utility Classes

Example

Center Alignment

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Growing Spinner Alignment

Note:In the above example flexbox utility class is used to align the spinners.

Spinner Alignment Using Floatexample 
    Loading...
  

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Spinner Alignment Using Float

Note: In the above example, .float-right is used to align the spinner to the right of the web page.

Spinner Alignment Using Text Utility ClassesExample
    Loading...
  

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Spinner Alignment Using Text Utility Classes

Note: In the above example, .text-center is used to align the spinner to the right of the web page.

Online Test / Quiz

Question set 1

Bootstrap 4 Spinners

Example

General Syntax

Source Code

Source Code : Output

Bootstrap Spinner

Colored Spinners

General Syntax

Source Code

Source Code : Output

Colored Spinners

Growing spinner

Example

General Syntax

Source Code

Source Code : Output

Growing Spinners

Colored Growing Spinner

Example

General Syntax

Source Code

Source Code : Output

Growing Spinners

Spinner Size

Example

General Syntax

Source Code

Source Code : Output

Spinner Size

Spinner Buttons

General Syntax

Source Code

Source Code : Output

Spinner Buttons

Spinner Alignment

Spinner Alignment Using Flex Utility Classes

Example

General Syntax

Source Code

Source Code : Output

Growing Spinner Alignment

Spinner Alignment Using Float

General Syntax

Source Code

Source Code : Output

Spinner Alignment Using Float

Spinner Alignment Using Text Utility Classes

Example

General Syntax

Source Code

Source Code : Output

Spinner Alignment Using Text Utility Classes

Online Test / Quiz

Our Tutorials