Home » Bootstrap Spinners

Bootstrap Spinners

by Online Tutorials Library

Bootstrap Spinners

Spinner is also called a loading indicator. It is used to display/indicate the loading state of our projects. Bootstrap uses a .spinner class to create a Spinner.

We use the below syntax to create a Spinner in Bootstrap

Types of Spinners

There are the following types of spinners that we create using Bootstrap –

1. Border Spinner

Border Spinner is used for lightweight indicators.

We use the below syntax to create a Border Spinner in Bootstrap –

Syntax:

Code:

Test it Now

2. Colored Spinners

We use the below syntax to create a Colored Spinner in Bootstrap –

Code:

Test it Now

3. Growing Spinner

We use .spinner-grow class to create a Growing Spinner in Bootstrap.

Syntax:

Code:

Test it Now

4. Colored growing spinner

We use the below syntax to create a colored growing spinner in Bootstrap.

Syntax:

Code:

Test it Now

Changing spinner alignment

Bootstrap allows us to change the spinner alignment using margin and placement utilities.

1. Using Margin

Margin is used to provide proper spacing, according to our project’s requirements.

Syntax:

Syntax:

Code:

Test it Now

2. Changing text alignment

The .text-center class is used to change the text alignment.

Code:

Test it Now

3. Using Flexbox

We can use the below syntax to change spinner alignment using Flexbox –

Syntax:

Code:

Test it Now

4. Using Float

We use the below syntax to change spinner alignment using Float –

Syntax:

Code:

Test it Now

Change Spinner size

We can also change the spinner size based on our requirement. The following div classes are used to change the size of spinner –

1. Small spinner – We use .spinner-border-sm and .spinner-grow-sm to make a small spinner.

Syntax:

Code:

Test it Now

2. Large Spinner – We use .spinner-border-lg and .spinner-grow-lg class to create a large spinner.

Syntax:

Code:

Test it Now

Bootstrap Button Spinner

Spinner inside button indicates an action that is currently in the processing stage.

Syntax

Code:

Test it Now


You may also like