My Blog

Bootstrap Spinners

—

by

Awais Farooq
in

Spinner is also called a loading indicator. It is used to display/indicate the loading state of our projects. Bootstrap uses a .spinner class to create a Spinner.

We use the below syntax to create a Spinner in Bootstrap –

<div class = "spinner-border"> </div>  

Types of Spinners

There are the following types of spinners that we create using Bootstrap –

1. Border Spinner

Border Spinner is used for lightweight indicators.

We use the below syntax to create a Border Spinner in Bootstrap –

Syntax:

 <div class = "spinner-border" role = "status">  

  <span class = "sr-only">Loading...</span>  

</div> 

    Code:

    <!DOCTYPE html>  

<html lang = "en">  

<head>  

    <meta charset = "UTF-8">  

    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">  

    <title>Bootstrap Border Spinner Example</title>  

    <!-- Bootstrap CDN -->  

    <link rel = "stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">  

  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>  

  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>  

  <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>  

  <style>  

      .container {  

          text-align: center;  

            

      }  

  </style>  

</head>  

<body>  

    <div class = "container">  

        <div class = "jumbotron">  

          <h1>Border Spinner Example</h1>   

          <div class = "spinner-border" role = "status">   

              <!-- status notify to Screen reader that this element is in the process -->  

              <span class = "sr-only">Loading...</span>  

              <!-- sr-only class hidden in normal devices, but it can be detected by screen readers -->  

          </div>   

        </div>  

    </div>  

</body>  

</html> 

    2. Colored Spinners

    We use the below syntax to create a Colored Spinner in Bootstrap –

     <div class = "spinner-border text-light" role = "status">  

  <span class = "sr-only">Loading...</span>  

</div> 

      Code:

      <!DOCTYPE html>  

<html lang = "en">  

  

<head>  

    <meta charset = "UTF-8">  

    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">  

    <title>Bootstrap Border Spinner Example</title>  

    <!-- Bootstrap CDN -->  

    <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">  

    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>  

    <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>  

    <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>  

    <style>  

        .container {  

            text-align: center;  

  

        }  

    </style>  

</head>  

  

<body>  

    <div class = "container">  

        <div class = "jumbotron">  

            <h1>Colored Spinner Example</h1>  

            <!-- Colored Spinners -->  

            <div class="spinner-border text-muted" role="status">  

                <span class="sr-only">Loading...</span>  

            </div>  

            <div class = "spinner-border text-success" role = "status">  

                <span class = "sr-only">Loading...</span>  

            </div>  

            <div class = "spinner-border text-info" role = "status">  

                <span class = "sr-only">Loading...</span>  

            </div>  

            <div class = "spinner-border text-light" role = "status">  

                <span class = "sr-only">Loading...</span>  

            </div>  

            <div class = "spinner-border text-primary" role = "status">  

                <span class="sr-only">Loading...</span>  

            </div>  

            <div class = "spinner-border text-secondary" role = "status">  

                <span class = "sr-only">Loading...</span>  

            </div>  

            <div class = "spinner-border text-danger" role = "status">  

                <span class = "sr-only">Loading...</span>  

            </div>  

            <div class = "spinner-border text-warning" role = "status">  

                <span class = "sr-only">Loading....</span>  

                <div class = "spinner-border text-dark" role = "status">  

                    <span class = "sr-only">Loading...</span>  

  

                </div>  

            </div>  

        </div>  

    </div>  

    </div>  

</body>  

</html> 

      3. Growing Spinner

      We use .spinner-grow class to create a Growing Spinner in Bootstrap.

      Syntax:

      <div class = "spinner-grow" role = "status">   

     <span class = "sr-only">Loading</span>  

</div> 

        Code:

        <!DOCTYPE html>  

<html lang = "en">  

<head>  

    <meta charset = "UTF-8">  

    <meta name = "viewport" content="width=device-width, initial-scale=1.0">  

    <title>Bootstrap Growing Spinner Example</title>  

    <!-- Bootstrap CDN -->  

    <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">  

  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>  

  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>  

  <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>  

</head>    

</head>  

<body>  

    <div class = "container">  

        <div class = "jumbotron">  

            <h1>Growing Spinner Example</h1>  

            <!-- Growing Spinner -->  

            <div class = "spinner-grow" role = "status">  

                <span class = "sr-only">Loading...</span>  

            </div>  

        </div>  

    </div>  

</body>  

</html> 

        4. Colored growing spinner

        We use the below syntax to create a colored growing spinner in Bootstrap.

        Syntax:

        <div class = "spinner-grow text-success" role = "status">   

    <span class = "sr-only">Loading...</span>  

</div>

        Code:

        <!DOCTYPE html>  

<html lang = "en">  

<head>  

    <meta charset = "UTF-8">  

    <meta name = "viewport" content="width=device-width, initial-scale=1.0">  

    <title>Bootstrap Colored Growing Spinner Example</title>  

    <!-- Bootstrap CDN -->  

    <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">  

  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>  

  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>  

  <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>  

</head>    

</head>  

<body>  

    <div class = "container">  

        <div class = "jumbotron">  

            <h1>Colored Growing Spinner Example</h1>  

            <!-- Colored Growing Spinner -->  

            <div class = "spinner-grow text-success" role = "status">   

                <span class = "sr-only">Loading...</span>  

            </div>  

            <div class = "spinner-grow text-light" role = "status">   

                <span class = "sr-only">Loading...</span>  

            </div>  

            <div class = "spinner-grow text-dark" role = "status">   

                <span class = "sr-only">Loading...</span>  

            </div>  

            <div class = "spinner-grow text-warning" role = "status">   

                <span class = "sr-only">Loading...</span>  

            </div>  

            <div class = "spinner-grow text-secondary" role = "status">   

                <span class = "sr-only">Loading...</span>  

            </div>  

            <div class = "spinner-grow text-danger" role = "status">   

                <span class = "sr-only">Loading...</span>  

            </div>  

            <div class = "spinner-grow text-primary" role = "status">   

                <span class = "sr-only">Loading...</span>  

            </div>  

              

        </div>  

    </div>  

</body>  

</html> 

        Changing spinner alignment

        Bootstrap allows us to change the spinner alignment using margin and placement utilities.

        1. Using Margin

        Margin is used to provide proper spacing, according to our project’s requirements.

        Syntax:

        Syntax:

        <div class = "spinner-border m-5" role = "status">  

  <span class = "sr-only">Loading...</span>  

</div> 

          Code:

          <!DOCTYPE html>  

<html lang = "en">  

<head>  

    <meta charset = "UTF-8">  

    <meta name = "viewport" content="width=device-width, initial-scale=1.0">  

    <title>Bootstrap Spinner Margin Example</title>  

    <!-- Bootstrap CDN -->  

    <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">  

  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>  

  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>  

  <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>  

</head>    

</head>  

<body>  

    <div class = "container">  

          

            <h1> Spinner Margin Example</h1>  

            <!-- Spinner Margin -->  

            <div class="spinner-border m-5" role="status">  

                <span class="sr-only">Loading...</span>  

              </div>  

              

        </div>  

    </div>  

</body>  

</html> 

          2. Changing text alignment

          The .text-center class is used to change the text alignment.

          <div class = "text-center">  

  <div class = "spinner-border" role = "status">  

    <span class = "sr-only">Loading...</span>  

  </div>  

</div> 

            Code:

            <!DOCTYPE html>  

<html lang = "en">  

<head>  

    <meta charset = "UTF-8">  

    <meta name = "viewport" content="width=device-width, initial-scale=1.0">  

    <title>Bootstrap Text alignment Example</title>  

    <!-- Bootstrap CDN -->  

    <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">  

  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>  

  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>  

  <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>  

<style>  

    .jumbotron {  

        text-align: center;  

    }  

</style>    

</head>  

<body>  

    <div class = "container">  

        <div class = "jumbotron">  

            <h1> Spinner Text alignemt Example</h1>  

            <!-- Change the text alignment -->  

            <div class = "text-center">  

                <div class = "spinner-border text-success" role = "status">  

                    <span class = "sr-only">Loading...</span>  

                  </div>  

                <div class = "spinner-border text-warning" role = "status">  

                  <span class = "sr-only">Loading...</span>  

                </div>  

                <div class = "spinner-border text-dark" role = "status">  

                    <span class = "sr-only">Loading...</span>  

                  </div>  

              </div>             

        </div>  

    </div>  

</body>  

</html> 

            3. Using Flexbox

            We can use the below syntax to change spinner alignment using Flexbox –

            Syntax:

              <div class = "d-flex align-items-center text-success">  

              <strong>Loading...</strong>  

              <div class = "spinner-border ml-auto" role = "status" aria-hidden = "true">  

               </div>  

              Code:

              <!DOCTYPE html>  

<html lang = "en">  

<head>  

    <meta charset = "UTF-8">  

    <meta name = "viewport" content="width=device-width, initial-scale=1.0">  

    <title>Bootstrap Flexbox Spinner Example</title>  

    <!-- Bootstrap CDN -->  

    <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">  

  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>  

  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>  

  <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>  

<style>  

    .jumbotron {  

        text-align: center;  

        margin: 20px;  

    }  

</style>    

</head>  

<body>  

    <div class = "container text-primary">  

        <div class = "jumbotron text-align-center">  

            <h1> Spinner Flexbox alignment Example</h1>  

            <!-- Change alignment using Flexbox -->  

            <div class = "d-flex align-items-center text-success">  

              <strong>Loading...</strong>  

              <div class = "spinner-border ml-auto" role = "status" aria-hidden = "true">  

               </div>  

            </div>           

        </div>  

    </div>  

</body>  

</html> 

              4. Using Float

              We use the below syntax to change spinner alignment using Float –

              Syntax:

              <div class = "clearfix">  

  <div class = "spinner-border float-right" role = "status">  

    <span class = "sr-only">Loading...</span>  

  </div>  

</div> 

                Code:

                <!DOCTYPE html>  

<html lang = "en">  

<head>  

    <meta charset = "UTF-8">  

    <meta name = "viewport" content="width=device-width, initial-scale=1.0">  

    <title>Bootstrap Float Spinner Example</title>  

    <!-- Bootstrap CDN -->  

    <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">  

  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>  

  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>  

  <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>  

<style>  

    .jumbotron {  

        text-align: center;  

        margin: 20px;  

    }  

</style>    

</head>  

<body>  

    <div class = "container text-success">  

        <div class = "jumbotron text-align-center">  

            <h1> Spinner Float alignment Example</h1>  

            <!-- Change alignment using Float -->  

            <div class = "clearfix">  

              <strong>Loading Page...</strong>  

              <div class = "spinner-border float-right text-primary" role = "status">  

               <span class = "sr-only">Loading...</span>  

                  

              </div>  

            </div>  

    </div>  

</body>  

</html> 

                Change Spinner size

                We can also change the spinner size based on our requirement. The following div classes are used to change the size of spinner –

                1. Small spinner – We use .spinner-border-sm and .spinner-grow-sm to make a small spinner.

                Syntax:

                <!-- For small border spinner -->  

  <div class = "spinner-border spinner-border-sm" role = "status">  

    <span class = "sr-only">Loading...</span>  

  </div>  

  <!-- For small grow border spinner -->  

  <div class = "spinner-grow spinner-grow-sm" role = "status">  

    <span class = "sr-only">Loading...</span>  

  </div>  

                  Code:

                  <!DOCTYPE html>  

<html lang = "en">  

<head>  

  <meta charset = "UTF-8">  

  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">  

  <title>Bootstrap Small Spinner Example</title>  

  <!-- Bootstrap CDN -->  

  <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">  

  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>  

  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>  

  <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>  

  <style>  

    .jumbotron {  

      text-align: center;  

      margin: 20px;  

    }  

  </style>  

</head>  

<body>  

  <div class = "container text-success">  

    <div class = "jumbotron text-align-center">  

      <h1> Small Spinner Example</h1>  

      <!-- For small border spinner -->  

      <div class = "spinner-border spinner-border-sm text-primary" role = "status">  

        <span class = "sr-only">Loading...</span>  

      </div>  

      <!-- For small grow border spinner -->  

      <div class = "spinner-grow spinner-grow-sm text-warning" role = "status">  

        <span class = "sr-only">Loading...</span>  

      </div>  

    </div>  

</body>  

  

</html> 

                  2. Large Spinner – We use .spinner-border-lg and .spinner-grow-lg class to create a large spinner.

                  Syntax:

                  <!-- For Large border spinner -->  

      <div class = "spinner-border spinner-border-lg text-primary" role = "status">  

        <span class = "sr-only">Loading...</span>  

      </div>  

      <!-- For Large grow border spinner -->  

      <div class = "spinner-grow spinner-grow-lg text-warning" role = "status">  

        <span class = "sr-only">Loading...</span>  

      </div>  

                    Code:

                    <!DOCTYPE html>  

<html lang = "en">  

<head>  

  <meta charset = "UTF-8">  

  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">  

  <title>Bootstrap Large Spinner Example</title>  

  <!-- Bootstrap CDN -->  

  <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">  

  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>  

  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>  

  <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>  

  <style>  

    .jumbotron {  

      text-align: center;  

      margin: 20px;  

    }  

  </style>  

</head>  

<body>  

  <div class = "container text-success">  

    <div class = "jumbotron text-align-center">  

      <h1> Large Spinner Example</h1>  

      <!-- For Large border spinner -->  

      <div class = "spinner-border spinner-border-lg text-primary" role = "status">  

        <span class = "sr-only">Loading...</span>  

      </div>  

      <!-- For Large grow border spinner -->  

      <div class = "spinner-grow spinner-grow-lg text-warning" role = "status">  

        <span class = "sr-only">Loading...</span>  

      </div>  

    </div>  

</body>  

</html>  

                    Bootstrap Button Spinner

                    Spinner inside button indicates an action that is currently in the processing stage.

                    Syntax

                    <!-- Bootstrap grow Spinner Button -->  

      <button class = "btn btn-primary" type="button" disabled>  

        <span class = "spinner-grow spinner-grow-sm" role = "status" aria-hidden = "true"></span>  

        <span class = "sr-only">Loading...</span>  

      </button>  

      <!-- Bootstrap border Spinner Button -->  

      <button class = "btn btn-secondary" type="button" disabled>  

        <span class = "spinner-border spinner-border-grow" role = "status" aria-hidden = "true"></span>  

        Loading...  

      </button>  

                      Code:

                      <!DOCTYPE html>  

<html lang = "en">  

<head>  

  <meta charset = "UTF-8">  

  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">  

  <title>Bootstrap Spinner Button Example</title>  

  <!-- Bootstrap CDN -->  

  <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">  

  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>  

  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>  

  <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>  

  <style>  

    .jumbotron {  

      text-align: center;  

      margin: 20px;  

    }  

  </style>  

</head>  

<body>  

  <div class = "container text-success">  

    <div class = "jumbotron text-align-center">  

      <h1> Bootstrap Spinner Button Example</h1>  

      <!-- Bootstrap grow Spinner Button -->  

      <button class = "btn btn-primary" type="button" disabled>  

        <span class = "spinner-grow spinner-grow-sm" role = "status" aria-hidden = "true"></span>  

        <span class = "sr-only">Loading...</span>  

      </button>  

      <!-- Bootstrap border Spinner Button -->  

      <button class = "btn btn-secondary" type="button" disabled>  

        <span class = "spinner-border spinner-border-grow" role = "status" aria-hidden = "true"></span>  

        Loading...  

      </button>  

    </div>  

</body>  

</html>  

                        Comments

                        Leave a Reply

                        Your email address will not be published. Required fields are marked *