Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Bootstrap | Spinners Set-2

  • Last Updated : 05 Aug, 2021

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.
     

html




<!DOCTYPE html>
<html>
 
<head>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css
                                 /bootstrap.min.css"
          integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI
                     706tWS" 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. 
     

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.
     

html




<!DOCTYPE html>
<html>
 
<head>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css
                                 /bootstrap.min.css"
          integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYb
                     I706tWS" 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.
     

html




<!DOCTYPE html>
<html>
 
<head>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css
                                 /bootstrap.min.css"
          integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYb
                     I706tWS" 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.
     

html




<!DOCTYPE html>
<html>
 
<head>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css
                                 /bootstrap.min.css"
          integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWK
                     YbI706tWS" 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.
     

html




<!DOCTYPE html>
<html>
 
<head>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css
                                 /bootstrap.min.css"
          integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWK
                     YbI706tWS" 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.
     

html




<!DOCTYPE html>
<html>
 
<head>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css
                                 /bootstrap.min.css"
          integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI7
                     06tWS" 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

 

Supported Browser:

  • Google Chrome
  • Microsoft Edge
  • Firefox
  • Opera
  • Safari
     




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!