Bootstrap | Spinners Set-1

Bootstrap provides us with various classes for creating different styles of spinner to indicate the loading state. We can also modify the appearance, size and placement of the spinners with the classes provided by Bootstrap.

Types of Spinners:

  • Border spinner: We can create light weight bordered spinner using the class spinner-border as given below.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
      
        <title>Bootstrap | Spinner</title>
      
        <style>
        h1{
            color: green;
            text-align: center;
        }
        </style>
    </head>
      
    <body>
        <div class="container">
        <h1>GeeksForGeeks</h1>
      
        <!-- spinner-border, #1 -->
        <div class="spinner-border" role="status">
            <span class="sr-only">Loading</span>
        </div>
      
        <!-- spinner-border, #2 -->
        <div class="spinner-border" role="status">
            <span class="sr-only">Loading</span>
        </div>
      
        <!-- spinner-border, #3 -->
        <div class="spinner-border" role="status">
            <span class="sr-only">Loading</span>
        </div>
          
        </div>
    </body>
    </html>                    

    chevron_right

    
    

    Note: We have used the class spinner-border inside <div>. We have used the role=”status” attribute-value pair inside the <div> for accessibility purposes and a <span> tag with class=”sr-only”, which is a Bootstrap class which make the container and its content visible only on screen-readers.

    Output:

    spinner-border



  • Colored border spinner: We can change the color of the border spinner using text color utility classes of Bootstrap along with the spinner-border class as given below.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
      
        <title>Bootstrap | Spinner</title>
      
        <style>
            h1 {
                color: green;
                text-align: center;
            }
              
            div {
                margin-top: 10px;
            }
        </style>
    </head>
      
    <body>
        <div class="container">
            <h1>GeeksForGeeks</h1>
      
            <!-- spinner-border, #1 -->
            <div class="spinner-border text-primary" role="status">
                <span class="sr-only">Loading</span>
            </div>
      
            <!-- spinner-border, #2 -->
            <div class="spinner-border text-secondary" role="status">
                <span class="sr-only">Loading</span>
            </div>
      
            <!-- spinner-border, #3 -->
            <div class="spinner-border text-success" role="status">
                <span class="sr-only">Loading</span>
            </div>
      
            <!-- spinner-border, #4 -->
            <div class="spinner-border text-danger" role="status">
                <span class="sr-only">Loading</span>
            </div>
      
            <!-- spinner-border, #5 -->
            <div class="spinner-border text-warning" role="status">
                <span class="sr-only">Loading</span>
            </div>
      
            <!-- spinner-border, #6 -->
            <div class="spinner-border text-info" role="status">
                <span class="sr-only">Loading</span>
            </div>
      
            <!-- spinner-border, #7 -->
            <div class="spinner-border text-light" role="status">
                <span class="sr-only">Loading</span>
            </div>
      
            <!-- spinner-border, #8 -->
            <div class="spinner-border text-dark" role="status">
                <span class="sr-only">Loading</span>
            </div>
      
        </div>
    </body>
      
    </html>

    chevron_right

    
    

    Note: We have used the class spinner-border inside <div>. We have used the role=”status” attribute-value pair inside the <div> for accessibility purposes and a <span> tag with class=”sr-only”, which is a Bootstrap class which make the container and its content visible only on screen-readers.

    Output:

    spinner-border-colored

  • Growing spinner: We can create growing spinner by using spinner-grow class of Bootstrap as given below.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
      
        <title>Bootstrap | Spinner</title>
      
        <style>
            h1 {
                color: green;
                text-align: center;
            }
              
            div {
                margin-top: 10px;
            }
        </style>
    </head>
      
    <body>
        <div class="container">
      
            <h1>GeeksForGeeks</h1>
      
            <!-- spinner-grow, #1 -->
            <div class="spinner-grow" role="status">
                <span class="sr-only">Loading</span>
            </div>
      
        </div>
    </body>
      
    </html>

    chevron_right

    
    

    Note: We have used the class spinner-grow inside <div>. We have used the role=”status” attribute-value pair inside the <div> for accessibility purposes and a <span> tag with class=”sr-only”, which is a Bootstrap class which make the container and its content visible only on screen-readers.

    Output:

    spinner-grow

  • Colored growing spinner: We can change the color of growing spinner using text color utility classes of Bootstrap along with the spinner-grow class as given below.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
      
        <title>Bootstrap | Spinner</title>
      
        <style>
            h1 {
                color: green;
                text-align: center;
            }
              
            div {
                margin-top: 10px;
            }
        </style>
      
    </head>
      
    <body>
        <div class="container">
            <h1>GeeksForGeeks</h1>
      
            <!-- spinner-grow, #1 -->
            <div class="spinner-grow text-primary" role="status">
                <span class="sr-only">Loading</span>
            </div>
      
            <!-- spinner-grow, #2 -->
            <div class="spinner-grow text-secondary" role="status">
                <span class="sr-only">Loading</span>
            </div>
      
            <!-- spinner-grow, #3 -->
            <div class="spinner-grow text-success" role="status">
                <span class="sr-only">Loading</span>
            </div>
      
            <!-- spinner-grow, #4 -->
            <div class="spinner-grow text-danger" role="status">
                <span class="sr-only">Loading</span>
            </div>
      
            <!-- spinner-grow, #5 -->
            <div class="spinner-grow text-warning" role="status">
                <span class="sr-only">Loading</span>
            </div>
      
            <!-- spinner-grow, #6 -->
            <div class="spinner-grow text-info" role="status">
                <span class="sr-only">Loading</span>
            </div>
      
            <!-- spinner-grow, #7 -->
            <div class="spinner-grow text-light" role="status">
                <span class="sr-only">Loading</span>
            </div>
      
            <!-- spinner-grow, #8 -->
            <div class="spinner-grow text-dark" role="status">
                <span class="sr-only">Loading</span>
            </div>
      
        </div>
    </body>
      
    </html>

    chevron_right

    
    

    Note: We have used the class spinner-grow inside <div>. We have used the role=”status” attribute-value pair inside the <div> for accessibility purposes and a <span> tag with class=”sr-only”, which is a Bootstrap class which make the container and its content visible only on screen-readers.

    Output:
    spinner-grow-colored



My Personal Notes arrow_drop_up

Student, BCA

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.