Bootstrap 5 Spinners Border

Last Updated : 5 Aug, 2024

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=
"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</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:

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=
"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</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/#border-spinner

Comment

Explore