Bootstrap spinners can be used to display the loading state in your projects. These classes are built only with HTML and CSS, meaning you don’t need any JavaScript to create them. We can also customize their appearance, alignment, and sizing of the bootstrap spinners with the help of bootstrap classes.
Types of Spinner:
- Border Spinner
- Growing Spinner
Border Spinner:
By using .spinner-border class, you can create bordered spinner.
This .sr-only class hides an element to all devices except screen readers.
Colored Border Spinners:
To change the color of border spinner use text color utility classes of bootstrap along with the .spinner-border class as shown in the below example:
Growing Spinner:
By using .spinner-grow class, you can create a growing spinner. The following is an example of the growing spinner.
Colored growing spinner:
To change the color of grow spinner use text color utility classes of bootstrap along with the .spinner-glow class as shown in the below example:
Spinner Size:
By using .spinner-border-sm and .spinner-grow-sm along with the .spinner-border and .spinner-grow classes to create smaller spinner.
Spinner Buttons:
We can add the spinner within the button with text or without text.