What is a Bootstrap 4 Spinner?

Overview

A loading spinner is used to visually indicate to users that something is happening on the webpage.

This loading spinner may indicate that data is being loaded loaded, that submitted data is being searched, etc.

Create a spinner with Bootstrap 4

We can create a spinner in Bootstrap 4 using the spinner-border class. We can change the color of the spinner by providing any text color utilities.

Syntax

<div></div>

text-success is the color of the spinner.

Example

Let’s take a look at an example:

Explanation

In the above code:

• Lines 7 to 10: We include all the prerequisites needed to run this spinner, which are Bootstrap, Jquery, and Popper.
• Lines 15 and 18: We create two spinners with primary and success colors.

Growing spinners

We can also use spinners that grow instead of spinning. We can achieve this by using the spinner-grow class.