Bootstrap Spinners

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 -

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>

Test it Now

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>

Test it Now

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>

Test it Now

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>

Test it Now

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:

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

Test it Now

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>

Test it Now

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>

Test it Now

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>

Test it Now

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>

Test it Now

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>

Test it Now

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>

Test it Now

Next TopicBootstrap star rating

← prev next →