Bootstrap 5 Spinners - GeeksforGeeks

18 Nov, 2021
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="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"        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="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"        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.
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">     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"></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>
Adding margin to Bootstrap spinners
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: 
HTML
<!DOCTYPE html><html> <head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width">     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"></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>
Placing the Spinners using the Bootstrap Classes
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">     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"></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>
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:
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">     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"></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>
Increasing the size of Bootstrap Spinners using inline CSS
Supported Browsers:
Google Chrome
Microsoft Edge
Firefox
Opera
Safari
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
saikatmohanta43434
sumitgumber28
surinderdawra388
Bootstrap-Questions
HTML-Questions
Bootstrap
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
Tailwind CSS vs Bootstrap
How to keep gap between columns using Bootstrap?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
How to set input type date in dd-mm-yyyy format using HTML ?