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 by 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.
<div class="spinner-border"></div>
The above example will return the result like as shown below.
In bootstrap, by using text color utility classes such as .text-primary, .text-success, .text-danger, etc. you can change the color of spinner.
<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 like as shown below.
The bootstrap has introduced another spinner called growing spinner which will repeatedly grow and fade out. To use growing spinner, you need to add .spinner-grow class to <div> element like as shown below.
<div class="spinner-grow"></div>
The above example will return the result like 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.
<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 like as shown below.
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.
<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 like as shown below.
In bootstrap, you can align the spinners left, right or center by using flexbox, float and text alignment utility classes.
<!-- 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 like as shown below.
In bootstrap, you can add spinners to the button by using bootstrap .spinner-border and .spinner-grow classes.
<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 like as shown below.
This is how we can use the spinners to indicate the loading state of component or page based on our requirements.