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.
The above example will return the result as shown below.
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 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.
The above example will return the result as shown below.
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 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 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 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.
This is how we can use the spinners to indicate the loading state of a component or page based on our requirements.
