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:

 Ví dụ Bootstrap 

Spinners at TipsMake.com

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

 

Colorful Spinner

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

For example:

 Ví dụ Bootstrap 

Colorful spinners on QuanTriMang.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:

 Ví dụ Bootstrap 

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:

 Ví dụ Bootstrap 

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?