Bootstrap 4 spinners show the loading state of the components.
Steps to create bootstrap 4 spinners.
.spinner-border
to the spinner loader container base class.
Note:Bootstrap spinner is used to show loading state of the web componet inside the web project.
Bootstrap spinners are used to show the loading state of the web component.
.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
.
Remember: Bootstrap provides different text utilities classes that is used to provide different color to the spinners.
Growing spinners glows repeatedly after a certain time duration.It does not spin.To make growing spinner,add
.spinner-grow
tp spinner container.
Note:
To create growing spinner,assign .spinner-grow
to the spinner container.
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: Use bootstrap text utility classes to make colorful growing spinners.
To create smaller spinner size ,use either .spinner-border-sm
or .spinner-grow-sm class
.
Note: In the above example, use .spinner-grow-sm
or .spinner-border-sm
to make smaller spinner size.
To create spinner button,place .spinner-border
element within <button>
.
Note:Spinner button can be created easily by assigning spinner inside the button.
flexbox utilities, float utilities, or text alignment are very helpful utilities class that placed spinner to any where in the web page.
Note:In the above example flexbox utility class is used to align the spinners.
Note:
In the above example, .float-right
is used to align the spinner to the right of the web page.
Note:
In the above example, .text-center
is used to align the spinner to the right of the web page.