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"> 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> 

    <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"> 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>