Bootstrap | Spinners Set-2

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

    chevron_right

    
    

    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.
  • 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>
      
            <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>

    chevron_right

    
    

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

    chevron_right

    
    

    Output:
    change-size-class

  • Using CSS: We can also change the size of spinner using CSS styling 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>
      
            <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>

    chevron_right

    
    

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

    chevron_right

    
    

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

    chevron_right

    
    

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

    chevron_right

    
    

    Output:
    change-alignment-flex



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.