Bootstrap 5 Spinners Buttons

Bootstrap 5 Spinners are used to display the loading state of a component or a page. The spinners within buttons are used to represent an action that is currently processing.

Spinners Buttons used Classes:

• .btn: It is used to create a button.
• .spinner-border: It is used to create a spinner with the border.
• .spinner-grow: It is used to create a grow and shrink spinner.

Syntax:

<button class="btn btn-*" type="button">
 <span class="spinner-border spinner-border-*" 
 role="status" aria-hidden="true"></span>
 <span class="visually-hidden">...</span>
</button>

 

Example 1: In this example, we will create loading spinner buttons with some text.

Output:

👁 Image

Example 2: In this example, we will create loading spinner buttons. in different colors and sizes.

Output:

👁 Image

Reference: https://getbootstrap.com/docs/5.0/components/spinners/#buttons