Bootstrap 5 spinners show the loading state of the components.
Steps to create bootstrap 5 spinners.
.spinner-border
to spinner loader container.
Note:Follow the above mention step to create bootstrap spinner.
Steps To create bootstrap 5 colored spinners, use text color utilities classes.
.spinner-border
to spinner loader container.
.text-*
to the spinner container.
.text-primary
,.text-secondary
,.text-success
,.text-danger
,.text-warning
,.text-info
,.text-light
,,text-dark
.
Note: To create different background color to the spinner,assign .text-*
utility class to the spinner container base class.
Growing spinners glows repeatedly after a certain time duration.It does not spin.To make growing spinner, add .spinner-grow
to the spinner container base class.
Note:To make growing spinner,add .spinner-grow
to the spinner container base class.
Steps to create colored growing spinners.
.spinner-grow
to spinner loader container.
.text-*
to the spinner container.
.text-primary
,.text-secondary
,.text-success
,.text-danger
,.text-warning
,.text-info
,.text-light
,.text-dark
.
Note:Follow the above mention concept to create colored growing spinners.
To create bootstrap 5 smaller spinner, use either .spinner-border-sm
or .spinner-grow-sm
class.
Note: Follow the above mention steps to create larger and smaller spinner size.
To create spinner button,place .spinner-border
element within <button>
.
Note:Follow the above mention steps to create spinner button.
Bootstrap 5 spinners can be aligned by following rules:
Margin utility classes are used to provide spacing to the spinner.
Note:Margin utility classes are very helpful for providing spacing to the spinner.
flexbox utilities, float utilities, or text alignment are very helpful utility classes that placed spinner anywhere on the web page.
Note:Spinner can be placed anywhere on the web page using flexbox utilities, float utilities, or text alignment.
Note:Spinner can also be placed either left or right using float.
Note:Spinner can also be placed in the center using text utility class.