Spinners in Bootstrap | BootStrap Tutorial

Spinners in Bootstrap

Introduction:

Spinners are used in web-pages to show that something is being loaded. It is like a circle that rotates or grows when we click or wait for something to load. This is quite useful to give the website some extra touch up with not some static effects.

Pre-requisite:

In order to perform this with Bootstrap, you have to make sure that you have installed all the required files or linked the necessary links for Bootstrap. This includes the CSS and well as the jQuery files/links.

Method:

To insert a spinner for the webpage it is very much easier to use the Bootstrap classes instead of writing hard CSS codes for the same thing. Bootstrap allows us to put a spinner anywhere we want by simply writing the classes for it. It also allows us to put the spinners according to our will, which means we can format the spinner and the behavior of the spinner according to our will. There can be small spinners, big spinners, growing spinners along with some properties like flex, float, and more. For accessibility purposes, each loader here includes role=" status" and a nested 

<span class="sr-only">Loading...</span>.

The simplest example would be:

<div class="spinner-border" role="status">

  <span class="sr-only">Loading...</span>

</div>

Here the class of spinner-border does the whole job and creates a nice rotating spinner.

These spinners can be given some different colors like red, blue, green, and all by simply adding classes like

text-primary  text-secondary text-success text-danger text-warning text-info text-light 

for the color blue, grey, green, red, yellow, and sky-blue respectively.

Like:

<div class="spinner-border text-info" role="status">  <span class="sr-only">Loading...</span></div>

There is also a growing type of spinner that actually does not rotates but scale up from 0 to 1 with a fade-out continuously.

The class of spinner-grow makes this possible. Just like before the color of this too can be customized with help of classes.

For Resizing

To create a spinner of rotating and growing of different sizes, the classes like  .sm  can be used, and also custom CSS inside the div element will do it too.

Example:

For smaller spinner

<div class="spinner-border spinner-border-sm" role="status">  <span class="sr-only">Loading...</span></div>

For bigger spinner

<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">  <span class="sr-only">Loading...</span></div>

For more information on spinners, you can read the documentation.