Open In App

Bootstrap 5 Spinners Border

Improve
Improve
Like Article
Like
Save
Share
Report

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

Spinners Border

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

Spinner Border

Reference: https://getbootstrap.com/docs/5.0/components/spinners/#border-spinner



Last Updated : 24 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads