Bootstrap 5 Spinners Border
Last Updated :
24 Nov, 2022
Bootstrap 5 Spinner is used to show the loading stage of the component, these spinners are built only with HTML and CSS. The Border Spinner is used for a lightweight loading indicator. To change, etc. the spinners color we need to use the Bootstrap 5 Text Color classes, like text-primary, text-success
Spinner Border Classes:
- spinner-border: This class is used to add the spinner border using Bootstrap.
Syntax:
<div class="spinner-border ...">
<span class="...">...</span>
</div>
Example 1: The following code demonstrates the Spinners Border of colors using primary, secondary, success, and danger classes with Spinners Border properties.
HTML
<!DOCTYPE html>
< html >
< head >
< link href =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
</ head >
< body >
< h1 class = "text-success" > GeeksforGeeks </ h1 >
< h2 >Bootstrap 5 Spinners Border</ h2 >
< ol >
< li >
black:
< div class = "spinner-border" role = "status" >
</ div >
</ li >
< li >
Primary:
< div class = "spinner-border text-primary" >
< span class = "visually-hidden" >...</ span >
</ div >
</ li >
< li >
Secondary:
< div class = "spinner-border text-secondary" >
< span class = "visually-hidden" >...</ span >
</ div >
</ li >
< li >
Success:
< div class = "spinner-border text-success" >
< span class = "visually-hidden" >...</ span >
</ div >
</ li >
< li >
Danger:
< div class = "spinner-border text-danger" >
< span class = "visually-hidden" >...</ span >
</ div >
</ li >
</ ol >
</ body >
</ html >
|
Output:
Spinners Border
Example 2: The following code demonstrates the Spinners Border of colors using warning, info, light, and dark classes with Spinners Border properties.
HTML
<!DOCTYPE html>
< html >
< head >
< link href =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
</ head >
< body >
< h1 class = "text-success" > GeeksforGeeks </ h1 >
< h2 >Bootstrap 5 Spinners Border</ h2 >
< ol >
< li >
Warning:
< div class = "spinner-border text-warning" >
< span class = "visually-hidden" >...</ span >
</ div >
</ li >
< li >
Info:
< div class = "spinner-border text-info" >
< span class = "visually-hidden" >...</ span >
</ div >
</ li >
< li >
Light:
< div class = "spinner-border text-light" >
< span class = "visually-hidden" >...</ span >
</ div >
</ li >
< li >
Dark:
< div class = "spinner-border text-dark" >
< span class = "visually-hidden" >...</ span >
</ div >
</ li >
</ ol >
</ body >
</ html >
|
Output:
Spinner Border
Reference: https://getbootstrap.com/docs/5.0/components/spinners/#border-spinner
Share your thoughts in the comments
Please Login to comment...