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>

Powered  by Codersarts