Bootstrap Spinners

In bootstrap, spinners are useful to indicate the loading state of the component or page in our applications. We can customize the bootstrap spinner's appearance, alignment, and size using utility classes, and the spinners are purely built with HTML and CSS.

 

In bootstrap, you can create the spinner or loading indicator by using .spinner-border class like as shown below.

 

Live Preview<div class="spinner-border"></div>

The above example will return the result as shown below.

 

Bootstrap spinner example result

Bootstrap Colored Spinners

In bootstrap, by using text color utility classes such as .text-primary, .text-success, .text-danger, etc. you can change the color of a spinner.

 

Live Preview <div class="spinner-border text-primary"></div>
<div class="spinner-border text-secondary"></div>
<div class="spinner-border text-warning"></div>
<div class="spinner-border text-danger"></div>
<div class="spinner-border text-success"></div>
<div class="spinner-border text-info"></div>
<div class="spinner-border text-light"></div>
<div class="spinner-border text-dark"></div>

The above example will return the result as shown below.

 

Bootstrap colored spinners example result

Bootstrap Growing Spinner

The bootstrap has introduced another spinner called a growing spinner, which will repeatedly grow and fade out. To use a growing spinner, you need to add .spinner-grow class to <div> element like as shown below.

 

Live Preview <div class="spinner-grow"></div>

The above example will return the result as shown below.

 

Bootstrap growing spinners example result

 

If required, you can also change the color of growing spinners using text color utility classes such as .text-primary, .text-success, .text-danger, etc.

 

Live Preview <div class="spinner-grow text-primary"></div>
<div class="spinner-grow text-secondary"></div>
<div class="spinner-grow text-warning"></div>
<div class="spinner-grow text-danger"></div>
<div class="spinner-grow text-success"></div>
<div class="spinner-grow text-info"></div>
<div class="spinner-grow text-light"></div>
<div class="spinner-grow text-dark"></div>

The above example will return the result as shown below.

 

Bootstrap colored growing spinners example result

Bootstrap Spinner Sizes

In bootstrap, you can customize the size of spinners either by using .spinner-border-sm, .spinner-grow-sm classes or custom inline styles like as shown below.

 

Live Preview <div class="spinner-border spinner-border-sm"></div>
<div class="spinner-grow spinner-grow-sm"></div>
<div class="spinner-border" style="width: 3rem; height: 3rem"></div>
<div class="spinner-grow" style="width: 3rem; height: 3rem"></div>

The above example will return the result as shown below.

 

Bootstrap spinner sizes example result

Bootstrap Spinners Alignment

In bootstrap, you can align the spinners left, right, or center using flexbox, float, and text alignment utility classes.

 

Live Preview <!-- Align Left -->
<div class="d-flex justify-content-left">
   <div class="spinner-border"></div>
</div>
<!-- Align Center -->
<div class="text-center">
   <div class="spinner-border"></div>
</div>
<!-- Align Right -->
<div class="clearfix">
   <div class="spinner-border float-right"></div>
</div>

The above example will return the result as shown below.

 

Bootstrap spinners alignment example result

Bootstrap Spinner Buttons

In bootstrap, you can add spinners to the button by using bootstrap .spinner-border and .spinner-grow classes.

 

Live Preview <button type="button" class="btn btn-primary">
    <span class="spinner-border spinner-border-sm"></span>
</button>
<button type="button" class="btn btn-primary" disabled>
    <span class="spinner-border spinner-border-sm"></span> Loading...
</button>
<button type="button" class="btn btn-primary">
    <span class="spinner-grow spinner-grow-sm"></span>
</button>
<button type="button" class="btn btn-primary" disabled>
    <span class="spinner-grow spinner-grow-sm"></span> Loading...
</button>

The above example will return the result as shown below.

 

Bootstrap spinner buttons example result

 

This is how we can use the spinners to indicate the loading state of a component or page based on our requirements.