Bootstrap 5 Spinners Border Colors
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 > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > </ head > < body > < h1 class = "text-success" > w3wiki </ 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:
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 > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > </ head > < body > < h1 class = "text-success" > w3wiki </ 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:
Reference: https://getbootstrap.com/docs/5.0/components/spinners/#colors
Contact Us