Bootstrap 4 – Spinner/Loader

The Spinners in Bootstrap 4 can be used to indicate the loading state in the web page. Bootstrap 4 also provides various classes for creating different styles of spinners.

The list of those various styles of Spinners:

Bordered Spinner
Spinners with Colors
Spinners that grow
Different Sizes of Spinners
Buttons with Spinners

Border Spinner:

A user can create bordered spinner with the help of .spinner-border class.

The Example for Border Spinner is given below:

  <!DOCTYPE html>  <html>  <head>    <title>Bootstrap Example</title>    <meta name=”viewport” content=”width=device-width, initial-scale=1″>    <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>  <body>  <div class=”container”>    <h2>Border Spinners</h2>                                          <div class=”spinner-border”></div>  </div>  </body>  </html>  

Test it Now

The Output will be:

Bootstrap 4 - Spinner

Spinner with Colors:

A user can also create a Colored Spinner. For the purpose of creating colored spinner, a user can change the color of the border spinner with the help of text color utility classes of Bootstrap that has to be used with the .spinner-border. The main advantage of creating spinners with Colors is that, a user can enhance the look of the website by displaying different colors for different types of spinners in a website.

The Example for Colored Spinner is given below:

  <!DOCTYPE html>  <html>  <head>    <title>Bootstrap Example</title>    <meta name=”viewport” content=”width=device-width, initial-scale=1″>    <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>  <body>  <div class=”container”>    <h2>Colored Spinners</h2>                                           <div class=”spinner-border text-muted”></div>    <div class=”spinner-border text-primary”></div>    <div class=”spinner-border text-success”></div>    <div class=”spinner-border text-info”></div>    <div class=”spinner-border text-warning”></div>    <div class=”spinner-border text-danger”></div>    <div class=”spinner-border text-secondary”></div>    <div class=”spinner-border text-dark”></div>    <div class=”spinner-border text-light”></div>  </div>  </body>  </html>  

Test it Now

The Output will be:

Bootstrap 4 - Spinner

Spinners that grow:

In order to create spinners that grow, a user has to use the .spinner-grow class. To create spinners, the user has to put the class .spinner-grow inside <div>.

The Example for Spinners that grow:

  <!DOCTYPE html>  <html>  <head>    <title>Bootstrap Example</title>    <meta name=”viewport” content=”width=device-width, initial-scale=1″>    <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>  <body>  <div class=”container”>    <h2>Spinners that grow</h2>                                            <div class=”spinner-grow text-muted”></div>    <div class=”spinner-grow text-primary”></div>    <div class=”spinner-grow text-success”></div>    <div class=”spinner-grow text-info”></div>    <div class=”spinner-grow text-warning”></div>    <div class=”spinner-grow text-danger”></div>    <div class=”spinner-grow text-secondary”></div>    <div class=”spinner-grow text-dark”></div>    <div class=”spinner-grow text-light”></div>  </div>  </body>  </html>  

Test it Now

The Output will be:

Bootstrap 4 - Spinner

Different Sizes of Spinners:

In Bootstrap 4, a user can modify the size with the help of the classes .spinner-border-sm and .spinner-grow-sm.

The Example for Different Sizes of Spinners:

  <!DOCTYPE html>  <html>  <head>    <title>Bootstrap Example</title>    <meta name=”viewport” content=”width=device-width, initial-scale=1″>    <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>  <body>  <div class=”container”>    <h2>Different Sizes of Spinners</h2>    <div class=”spinner-border spinner-border-sm”></div>    <div class=”spinner-grow spinner-grow-sm”></div>  </div>  </body>  </html>  

Test it Now

The Output will be:

Bootstrap 4 - Spinner

Buttons with Spinners:

A user can also add spinners to a button that does not contain text or contain text.

The Example for Buttons with Spinners:

  <!DOCTYPE html>  <html>  <head>    <title>Bootstrap Example</title>    <meta name=”viewport” content=”width=device-width, initial-scale=1″>    <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>  <body>  <div class=”container”>    <h2>Buttons with Spinners</h2>                                              <button class=”btn btn-primary”>      <span class=”spinner-border spinner-border-sm”></span>    </button>       <button class=”btn btn-primary”>      <span class=”spinner-border spinner-border-sm”></span>      Loading..    </button>        <button class=”btn btn-primary” disabled>      <span class=”spinner-border spinner-border-sm”></span>      Loading..    </button>        <button class=”btn btn-primary” disabled>      <span class=”spinner-grow spinner-grow-sm”></span>      Loading..    </button>  </div>  </body>  </html>  

Test it Now

The Output will be:

Bootstrap 4 - Spinner

Next TopicBootstrap 4 Badges

bootstrap 4 bootstrap 4 Buttons bootstrap 4 Dropdown bootstrap 4 Forms bootstrap 4 Images bootstrap 4 Jumbotron bootstrap 4 Layout bootstrap 4 Lists bootstrap 4 MCQ bootstrap 4 Navs bootstrap 4 Progress Bars bootstrap 4 Spinners bootstrap 4 Tables bootstrap 4 Tooltip bootstrap 4 tutorial what is bootstrap4

Bootstrap 4 Spinner/Loader

Bootstrap 4 – Spinner/Loader

Border Spinner:

Spinner with Colors:

Spinners that grow:

Different Sizes of Spinners:

Buttons with Spinners:

AutoCAD LT Download

Boostrap3 sticky header

You may also like