Bootstrap 5 Spinners
Bootstrap 5 classes use the “spinners” to indicate the loading status in your applications. They are constructed just using HTML and CSS; therefore, you do not require JavaScript to make them. Using our incredible utility classes, you can simply modify their appearance, alignment, and size. To toggle their visibility, you will need to write some custom JavaScript.
Basic spinners
The basic spinner uses the “spinner-border” class on the web page. We can use text with the spinner. The spinner text can be visible or hidden as per user requirements.
Syntax
The following syntax shows how to create spinner using bootstrap 5 class.
Example
The example shows basic and default spinners according to the user requirement.
Output
The following image shows the basic spinner on the web page.
Bootstrap 5 Colored spinners
The colored spinner uses the “spinner-border” with the “text-*” classes on the web page. We can use bootstrap 5 contextual classes such as primary, secondary, and muted with the spinner. The colored spinner uses as per web application format and user requirements.
Syntax
The following syntax shows how to create colored spinner using bootstrap 5 class.
Example
The example shows basic and default and colored spinners according to the user requirement.
Output
The following image shows colored spinners on the web page.
Bootstrap 5 growing spinners
The growing spinner uses the “spinner-grow” class on the web page. The growing spinner uses the contextual color in the <div> tag.
Syntax
The following syntax shows how to create growing spinner using bootstrap 5 class.
Example
The example shows basic and default and colored spinners according to the user requirement.
Output
The following image shows grow spinners on the web page.
Spinner sizes
The bootstrap 5 spinner function uses on a web page with the required size. We can set the spinner as per large, default, and small size. The spinner size uses with the spinner-border and spinner-grow classes.
Syntax
The following syntax shows how to create spinner with required size using bootstrap 5 class.
The following syntax shows how to create growing spinner with required size.
Example
The example shows basic and default and colored spinners according to the user requirement.
Output
The following image shows grow spinners on the web page.
Button Spinner
Bootstrap 5 button spinner works with the button function and sizes. We can create a button and place the spinner tag in the button function. The spinner chooses size as per button size and web application requirements.
Syntax
The following syntax shows how to colored spinners in the button with required size using bootstrap 5 class.
Example
The example shows colored spinners in the button according to the user requirement.
Output
The following image shows button spinners on the web page.
Spinner margin
The spinner uses the “spinner-border” and “spinner-grow” classes with the required margin.
Syntax
The following syntax shows spinner with margin size using bootstrap 5 class.
Example
The example shows basic spinners with margin according to the user requirement.
Output
The following image shows the basic spinner on the web page.
Spinner position
The spinner uses the “spinner-border” and “spinner-grow” classes with the required position. We can place it at the start or end of the side of the web page.
Syntax
The following syntax shows spinner with required position using bootstrap 5 class.
Example
The example shows basic and default spinners according to the user requirement.
Output
The following image shows the basic spinner on the web page.
Conclusion
The spinner creates to notify users to load or wait. This function uses to know about loading any function and features of the web application.