Open In App

Bootstrap 5 Spinners

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will implement spinners in the website using Bootstrap & will also see the implementation of different types of spinners through the example. The spinners are used to specify the loading state of a component or webpage. Bootstrap facilitates the various classes for creating different styles of spinners by modifying the appearance, size, and placement.

Syntax:

  • For spinner-border:
<div class="spinner-border" role="status"></div>
  • For spinner-grow:
<div class="spinner-grow" role="status"></div>

Approach: We will use a div element for spinners & declare the bootstrap classes called spinner-border and spinner-grow, inside the div section in order to use the spinners. The spinner-border class is used for rotating spinner and the spinner-grow is used for growing spinners. They are used for showing that some content is loading.

Example 1: This example illustrates the spinner-border in Bootstrap.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width">
 
    <link href=
        rel="stylesheet">
</head>
 
<body>
    <h1 class="text-success text-center">
        GeeksforGeeks
    </h1>
     
    <h4 class="text-info text-center">
        Bootstrap Spinner Border
    </h4>
     
    <div class="d-flex justify-content-center">
        <div class="spinner-border text-secondary"
            role="status">
        </div>
         
        <span>Please Wait </span>
    </div>
</body>
 
</html>


Output:

spinner-border

Example 2: This example describes the spinner-grow in Bootstrap. 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width">
 
    <link href=
        rel="stylesheet">
</head>
 
<body>
    <h1 class="text-success text-center">
        GeeksforGeeks
    </h1>
     
    <h4 class="text-info text-center">
        Bootstrap Spinner Grow
    </h4>
     
    <div class="d-flex justify-content-center">
        <span>
            <h5>Processing</h5>
        </span>
        <div class="spinner-grow text-primary"
            role="status">
        </div>
    </div>
</body>
 
</html>


Output:

spinner-grow

Now we will learn how to align the spinners in the webpage according to our needs.

Alignment

Margin

We can add margin to the spinners in Bootstrap using the margin utilities class in Bootstrap. Here is an example given below:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
 
</head>
 
<body>
    <h1 class="text-success text-center">
        GeeksforGeeks
    </h1>
 
    <h4 class="text-info text-center">
        Adding margin to Bootstrap Spinners
    </h4>
 
 
    <div class="spinner-border m-5" role="status">
 
    </div>
</body>
 
</html>


Output:

Adding margin to Bootstrap spinners

Placement

We can place the spinner at different positions like the center, end or start using the text placement or flex box classes. Below given is the example in which we have used flexbox and text placement classes: 

Code:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
 
</head>
 
<body>
    <h1 class="text-success text-center">
        GeeksforGeeks
    </h1>
 
    <h4 class="text-info text-center">
        Spinner Placement using Bootstrap classes
    </h4>
    <h4 class=" text-center">
        Using the Text Placement Classes
    </h4>
 
    <div class="text-center">
        <div class="spinner-border m-5 " role="status">
        </div>
 
    </div>
    <h4 class="text-center">
        Using the Flex Box Classes
    </h4>
    <div class="d-flex justify-content-center">
        <div class="spinner-border" role="status">
        </div>
    </div>
</body>
 
</html>


Output:

Placing the Spinners using the Bootstrap Classes

Size

We can also adjust the size of the spinners according to our needs using the Bootstrap classes or by using the inline CSS styling.

We can add the .spinner-border-sm and .spinner-grow-sm classes to make smaller spinners that can fit inside different components. Here is an example:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
 
</head>
 
<body>
    <h1 class="text-success text-center">
        GeeksforGeeks
    </h1>
 
    
     
    <div class="text-center">
        <h3>Making smaller Spinners using the Bootstrap Classes</h3>
        <div class="spinner-border spinner-border-sm" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <div class="spinner-grow spinner-grow-sm" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
 
    </div>
</body>
 
</html>


Output:

Decreasing the Size of Bootstrap Spinners

We can also increase or decrease size of spinners using the inline CSS styling by defining the width and height attributes. Here is an example where we increased the size of the spinner using the inline CSS styling:

Code:

HTML




<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Welcome To GFG</h2>
 
 
 
<p>Default code has been loaded into the Editor.</p>
 
 
 
</body>
</html>
a<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
 
</head>
 
<body>
    <h1 class="text-success text-center">
        GeeksforGeeks
    </h1>
 
    
     
    <div class="text-center">
        <h3>Increasing the size of Spinners using inline CSS</h3>
        <div class="spinner-border" style="width: 4rem; height: 4rem;" role="status">
            <span class="visually-hidden">Loading...</span>
          </div>
          <div class="spinner-grow" style="width: 4rem; height: 4rem;" role="status">
            <span class="visually-hidden">Loading...</span>
          </div>
 
    </div>
</body>
 
</html>


Output:

Increasing the size of Bootstrap Spinners using inline CSS

Supported Browsers:

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


Last Updated : 18 Nov, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads