Bootstrap 5 Spinners Border Colors
Last Updated :
10 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. There are various colors of spinners provided by Bootstrap 5 spinners.
Spinner Border Colors Classes:
- spinner-border: This class is used to add the spinner border using Bootstrap.
- text-primary: This class is used to change the spinner colour to blue.
- text-secondary: This class is used to change the spinner colour to grey.
- text-success: This class is used to change the spinner colour to green.
- text-danger: This class is used to change the spinner colour to red.
- text-warning: This class is used to change the spinner colour to yellow.
- text-info: This class is used to change the spinner colour to sky blue.
- text-light: This class is used to change the spinner colour to white.
- text-dark: This class is used to change the spinner colour to black.
Syntax:
<div class="spinner-border text-...">
<span>...</span>
</div>
Example 1: The following code demonstrates the different Spinners Border Colors using text-primary, text-secondary, text-success, and text-danger classes using Spinner Border properties.
HTML
<!DOCTYPE html>
< html >
< head >
< title >List Active Item</ title >
rel = "stylesheet"
integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
</ head >
< body >
< h1 class = "text-success" > GeeksforGeeks </ h1 >
< h2 >Bootstrap 5 Spinners Border Colors</ h2 >
< ol >
< 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 Colors
Example 2: The following code demonstrates the different Spinners Border Colors using text-warning, text-info, text-light, and text-dark classes using Spinner Border properties.s
HTML
<!DOCTYPE html>
< html >
< head >
< title >List Active Item</ title >
rel = "stylesheet"
integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
</ head >
< body >
< h1 class = "text-success" > GeeksforGeeks </ h1 >
< h2 >Bootstrap 5 Spinners Border Colors</ 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:
Spinners Border Colors
Reference: https://getbootstrap.com/docs/5.0/components/spinners/#colors
Share your thoughts in the comments
Please Login to comment...