Spinners in Bootstrap

To create a spinner or loading indicator, you can use the .spinner-border class.

Syntax:

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

​

You can also use all text color utility classes like, primary, secondary, danger, etc.

​

Syntax:

​

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

Growing Spinners

Create growing spinners that repeatedly grow and fade out.

​

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

​

You can also use all text color utility classes like, primary, secondary, danger, etc.

​

Adjust size of Spinners

Syntax:

​

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

​

Spinners inside button

Syntax:

​

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