Skip to content
Related Articles

Related Articles

Bootstrap | Spinners Set-2
  • 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.

  • Buttons with border spinner: We can place the border spinner within the button by using the spinner-border class within a <span> tag which is in turn nested inside a <button> tag having Bootstrap Button classes 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>
      
            <button type="button" class="btn btn-secondary" disabled>
                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true">
                </span>
                <span class="sr-only">Loading</span>
            </button>
      
            <button type="button" class="btn btn-primary" disabled>
                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true">
                </span
                Processing...
            </button>
      
        </div>
    </body>
      
    </html>

    Note: We have placed “disabled” attribute within the <button> tag to deactivate it and used “role” and “aria-hidden” attributes within <span> tag for accessibility purposes.

    Output:
    button-spinner-border

  • Buttons with growing spinner: We can place the growing spinner within the button by using the spinner-grow class within a <span> tag which is in turn nested inside a <button> tag having Bootstrap Button classes 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>
      
            <button type="button" class="btn btn-secondary" disabled>
                <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
                <span class="sr-only">Loading</span>
            </button>
      
            <button type="button" class="btn btn-primary" disabled>
                <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span
                Processing...
            </button>
        </div>
    </body>
      
    </html>

    Note: We have placed “disabled” attribute within the <button> tag to deactivate it and used “role” and “aria-hidden” attributes within <span> tag for accessibility purposes.

    Output:



    button-spinner-grow

Changing the size

  • Using class: We can make the spinner smaller using the classes spinner-border-sm and spinner-grow-sm along with the spinner-border and spinner-grow classes, respectively, 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-sm -->
            <div class="spinner-border text-primary spinner-border-sm" role="status">
                <span class="sr-only">Loading</span>
            </div>
      
            <!-- spinner-grow-sm -->
            <div class="spinner-grow text-primary spinner-grow-sm" role="status">
                <span class="sr-only">Loading</span>
            </div>
        </div>
    </body>
      
    </html>

    Output:
    change-size-class

  • Using CSS: We can also change the size of spinner using CSS styling 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>
      
            <div class="spinner-border text-primary" role="status" style="height:5rem; width:5rem;">
                <span class="sr-only">Loading</span>
            </div>
      
            <div class="spinner-grow text-primary" role="status" style="height:5rem; width:5rem;">
                <span class="sr-only">Loading</span>
            </div>
        </div>
    </body>
      
    </html>

    Output:
    change-size-css

Changing the alignment

  • Using text alignment utilities: We can change the alignment of spinner by placing it inside <div> tag which uses text alignment utilities class to control the alignment of children elements 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>
      
            <!-- Changing alignment using text utilities class -->
            <div class="text-center">
                <div class="spinner-border text-primary" role="status">
                    <span class="sr-only">Loading</span>
                </div>
            </div>
      
        </div>
    </body>
      
    </html>

    Output:
    change-alignment-text

  • Using float utilities: We can change the alignment of spinner by placing it inside <div> tag which uses float utilities class to control the alignment of children elements or use the float utilities class directly within the <div> tag through which spinner is created 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>
      
            <!-- Changing alignment using text utilities class -->
            <div class="clearfix float-right">
                <div class="spinner-border text-primary" role="status">
                    <span class="sr-only">Loading</span>
                </div>
            </div>
        </div>
      
    </body>
    </html>

    Output:

    change-alignment-float

  • Using flexbox utilities: We can change the alignment of spinner by placing it inside <div> tag which uses flexbox utilities class to control the alignment of children elements 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>
      
            <!-- Changing alignment using text utilities class -->
            <div class="d-flex justify-content-center">
                <div class="spinner-border text-primary" role="status">
                    <span class="sr-only">Loading</span>
                </div>
            </div>
        </div>
    </body>
      
    </html>

    Output:
    change-alignment-flex

My Personal Notes arrow_drop_up
Recommended Articles
Page :