Bootstrap 4 | Spinners

Bootstrap provides various classes for creating different styles of “spinner” to display the loading state of projects. These classes are inbuilt with HTML and CSS so no need to write any JavaScript to create them. We can also modify the appearance, size, and placement of the spinners with the classes provided by Bootstrap.

Types of Spinner:

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

    Syntax:

    <div class="spinner-border" role="status"> 
        <span class="sr-only">Loading</span>
    </div> 

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <title>Bootstrap Spinners</title>
      
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
      
        <link rel="stylesheet" href=
      
        <script src=
        </script>
      
        <script src=
        </script>
      
        <script src=
        </script>
    </head>
      
    <body>
        <center>
            <h1 style="color:green;text-align:center;">
            GeeksforGeeks
        </h1>
      
            <!-- spinner-border --> 
            <div class="spinner-border" role="status">
                <span class="sr-only">Loading</span>
            </div>
      </center>
    </body>
      
    </html>

    chevron_right

    
    

    Output:

    Note: We have used the class .spinner-border inside <div> element. 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 makes the container and it’s content visible only on screen-readers.

  • Colored Spinners: 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.

    Syntax:

    <div class="spinner-border text-primary" role="status">
        <span class="sr-only">Loading</span>
    </div> 
    

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <title>Bootstrap Spinners</title>
      
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
      
        <link rel="stylesheet" href=
      
        <script src=
        </script>
      
        <script src=
        </script>
      
        <script src=
        </script>
    </head>
      
    <body>
        <center>
            <h1 style="color:green;text-align:center;">
            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
    </center>
    </body>
      
    </html>                    

    chevron_right

    
    

    Output:

    Note: We have used the text color utility instead of border-color utilities because each border spinner specifies a transparent border for at least one side and the border-{color} utilities override that.

  • Growing spinner: We can create growing spinner by using .spinner-grow class of Bootstrap. It displays as repeatedly grow.

    Syntax:

            
    <div class="spinner-grow" role="status"> 
         <span class="sr-only">Loading</span>
    </div> 

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html> 
    <html lang="en"
    <head
        <title>Bootstrap Spinners</title
          
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
      
        <link rel="stylesheet" href=
          
        <script src=
        </script>
          
        <script src=
        </script>
          
        <script src=
        </script>
    </head
      
    <body
    <center>
        <h1 style="color:green;text-align:center;">
            GeeksforGeeks
        </h1
        
            <!-- spinner-grow -->
            <div class="spinner-grow" role="status"
                <span class="sr-only">Loading</span
            </div
        
        </div
        <center>
    </body
      
    </html>                    

    chevron_right

    
    

    Output:

    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.

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

    Syntax:

    <div class="spinner-grow text-primary" role="status"> 
        <span class="sr-only">Loading</span>
    </div> 
    

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <title>Bootstrap Spinners</title>
      
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
      
        <link rel="stylesheet" href=
      
        <script src=
        </script>
      
        <script src=
        </script>
      
        <script src=
        </script>
    </head>
      
    <body>
        <center>
            <h1 style="color:green;text-align:center;">
            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
    </center>
    </body>
      
    </html>                    

    chevron_right

    
    

    Output:

    Note: The spinner is built with currentColor which is easily change its appearance with text color utilities.

  • Buttons with border spinner: We can place the border spinner within the button with text or without text by using the .spinner-border class within a <span> tag.

    Syntax:

    <button type="button" class="btn btn-primary" disabled> 
        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"> 
        </span> 
        Text 
    </button>
    

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <title>Bootstrap Spinners</title>
      
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
      
        <link rel="stylesheet" href=
      
        <script src=
        </script>
      
        <script src=
        </script>
      
        <script src=
        </script>
    </head>
      
    <body>
        <center>
            <h1 style="color:green;text-align:center;">
            GeeksforGeeks
        </h1>
        <div class="container">
             <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>
    </center>
    </body>
      
    </html>                    

    chevron_right

    
    

    Output:

    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.

  • Buttons with growing spinner: We can place the growing spinner within the button with text or without text by using the .spinner-grow class within a <span> tag.

    Syntax:

    <button type="button" class="btn btn-primary" disabled> 
        <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>  
        text
    </button> 
    

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <title>Bootstrap Spinners</title>
      
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
      
        <link rel="stylesheet" href=
      
        <script src=
        </script>
      
        <script src=
        </script>
      
        <script src=
        </script>
    </head>
      
    <body>
        <center>
            <h1 style="color:green;text-align:center;">
            GeeksforGeeks
        </h1>
        <div class="container">
             <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" disable> 
                <span class="spinner-grow spinner-grow-sm" 
                      role="status" 
                      aria-hidden="true"
                </span>  
                Processing... 
            </button
        </div>
    </center>
    </body>
      
    </html>                    

    chevron_right

    
    

    Output:

    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.

Changing the size:

  • Using class: We can change the size using the classes .spinner-border-sm and .spinner-grow-sm along with the .spinner-border and .spinner-grow classes.
    The list of size classes are given below:

    • sm
    • md
    • lg

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <title>Bootstrap Spinners</title>
      
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
      
        <link rel="stylesheet" href=
      
        <script src=
        </script>
      
        <script src=
        </script>
      
        <script src=
        </script>
    </head>
      
    <body>
        <center>
            <h1 style="color:green;text-align:center;">
            GeeksforGeeks
        </h1>
        <div>
             <!-- spinner-border-sm -->
            <div class="spinner-border text-primary spinner-border-sm" 
                 role="status"
                <span class="sr-only">Loading</span
            </div
        
            <!-- spinner-grow-lg -->
            <div class="spinner-grow text-primary spinner-grow-lg" 
                 role="status"
                <span class="sr-only">Loading</span
        </div>
    </center>
    </body>
      
    </html>                    

    chevron_right

    
    

    Output:

  • Using CSS: We can also change the size of spinner using CSS styling as given below.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <title>Bootstrap Spinners</title>
      
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
      
        <link rel="stylesheet" href=
      
        <script src=
        </script>
      
        <script src=
        </script>
      
        <script src=
        </script>
    </head>
      
    <body>
        <center>
          <div class="container"
            <h1 style="color:green;text-align:center;">
            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
    </center>
    </body>
      
    </html>                    

    chevron_right

    
    

    Output:

Changing the alignment:

  • Using text alignment utilities: We can change the alignment of the spinner by placing it inside <div> tag which uses text alignment utility class to control the alignment of children elements as given below.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <title>Bootstrap Spinners</title>
      
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
      
        <link rel="stylesheet" href=
      
        <script src=
        </script>
      
        <script src=
        </script>
      
        <script src=
        </script>
    </head>
      
    <body>
          <div class="container"
            <h1 style="color:green;text-align:center;">
            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
      
    </body>
      
    </html>                    

    chevron_right

    
    

    Output:

  • Using float utilities: We can change the alignment of spinner by placing it inside the <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.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <title>Bootstrap Spinners</title>
      
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
      
        <link rel="stylesheet" href=
      
        <script src=
        </script>
      
        <script src=
        </script>
      
        <script src=
        </script>
    </head>
      
    <body>
          <div class="container"
            <h1 style="color:green;text-align:center;">
            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:

  • Using flexbox utilities: We can change the alignment of the spinner by placing it inside <div> element which uses flexbox utility class to control the alignment of children elements as given below.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <title>Bootstrap Spinners</title>
      
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
      
        <link rel="stylesheet" href=
      
        <script src=
        </script>
      
        <script src=
        </script>
      
        <script src=
        </script>
    </head>
      
    <body>
          <div class="container"
            <h1 style="color:green;text-align:center;">
            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:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

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.