Skip to content
Related Articles

Related Articles

Bootstrap | Spinners Set-1
  • Last Updated : 11 Feb, 2019

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.




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

    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.




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

    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.




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

    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.




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

    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
Recommended Articles
Page :