Lesson 14: Spinner in Bootstrap 5

What is a Spinner in Bootstrap 5 ? How do you use a Spinner in Bootstrap 5? Let's find out together with TipsMake.com!

Simply put, spinners are icons that display the loading status on websites, applications, etc. Spinners in Bootstrap 5 are developed entirely using CSS and HTML and do not require JavaScript.

However, you will need some custom JavaScript to convert their visibility. Their appearance, alignment, and size are all easily customizable using utility classes.

How to Create a Spinner in Bootstrap 5

To create a spinner or loading button, use the class .spinner-border:

For example:

English example text

Spinners at TipsMake.com

To create page load states in Tipsmake, use the class .spinner-border:

Colorful Spinner

Use any text coloring utility to add color to your desired spinner.

For example:

English example text

Colorful Spinners on Tipsmake.com

Use any text coloring utility to color the spinner:

Spinner Gets Bigger

Use a class .spinner-growif you want the spinner/load button to gradually grow larger instead of just spinning:

English example text

Spinner Gets Bigger on QTM

Use a class .spinner-growif you want the loading state to be a gradually growing circle instead of just a spinning circle as on TipsMake.com:

Spinner Size

Use .spinner-border-smor .spinner-grow-smto create a smaller spinner.

For example:

English example text

Spinner Size

Use .spinner-border-smor .spinner-grow-smcreate a smaller spinner on TipsMake.com:

Spinner Buttons

You can also add a spinner to a button with or without text:

 Bootstrap Example 

Button-operated Spinner

Add spinners to your buttons on TipsMake.com:

    Loading.   Loading.   Loading.  

Above are the ways to create spinners in Bootstrap 5. Compared to creating a progress bar using Bootstrap 5, the process of coding status buttons for a website or application is much simpler, isn't it?