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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...