Logo

Bootstrap 4 Spinners

Bootstrap 4 offers spinner is a loading indicator that is used to display the loading state of any component or web page. The spinner is also known as a loader or pre-loader.

A spinner/loader is an animation tool that keeps the user entertained during the loading of any webpage. They are created using only HTML (HyperText Markup Language) and CSS (Cascading Style Sheets), and it does not require JavaScript code. However, still, some custom JavaScript is needed to toggle their visibility. We can easily change the sizing, appearance, and alignment of the spinner without using any utility class.

Default/Border Spinner

To create a spinner, add .spinner-border class along with the role =”status” attribute value pair in the parent <div> element. The .sr class is used inside the nested <span> element that makes the content visible on the screen readers.

Syntax

<div class="spinner-border" role="status">
  <span class="sr-only">Loading...</span>
</div>

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Spinner Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<div class="container">
  <h2>Spinners</h2> <br>
  <div class="spinner-border" role="status">
   <span class="sr-only">Loading...</span>
  </div>
</div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
</body>
</html>

Output

Bootstrap Spinners

Colored Spinner

Default/border spinner uses current-color for border-color, which means you can set the color of the spinner according to your own with the help of text color utilities. For creating colored spinner, you have to add the text color class along with the .spinner-border class.

Syntax

<div class="spinner-border text-*" role="status">
<span class="sr-only">Loading</span>
  </div>

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Spinner Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<div class="container">
  <h2>Colored Spinners</h2>
  <div class="spinner-border text-muted">
    <span class="sr-only">Loading</span>
  </div>
  <div class="spinner-border text-primary">
    <span class="sr-only">Loading</span>
  </div>
  <div class="spinner-border text-success">
    <span class="sr-only">Loading</span>
 </div>
  <div class="spinner-border text-info">
    <span class="sr-only">Loading</span>
  </div>
  <div class="spinner-border text-warning">
    <span class="sr-only">Loading</span>
  </div>
  <div class="spinner-border text-danger">
    <span class="sr-only">Loading</span>
  </div>
  <div class="spinner-border text-secondary">
    <span class="sr-only">Loading</span>
  </div>
  <div class="spinner-border text-dark">
    <span class="sr-only">Loading</span>
  </div>
  <div class="spinner-border text-light">
    <span class="sr-only">Loading</span>
  </div>
</div
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
</body>
</html>

Output

Bootstrap Spinners

Growing Spinners

The growing spinners repeatedly fade in (grow) and then fade out instead of spinning. Like border spinners, you can also change or set the color of the growing spinner according to you with the help of text color utilities.

The .spinner grow class is used to create growing spinners.

Syntax

<div class="spinner-grow">
    <span class="sr-only">Loading</span>
  </div>

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Spinner Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<div class="container">
  <h2>Growing Spinners</h2>
  <div class="spinner-grow text-muted">
    <span class="sr-only">Loading</span>
  </div>
  <div class="spinner-grow text-primary">
    <span class="sr-only">Loading</span>
  </div>
  <div class="spinner-grow text-success">
    <span class="sr-only">Loading</span>
  </div>
  <div class="spinner-grow text-info">
    <span class="sr-only">Loading</span>
  </div>
  <div class="spinner-grow text-warning">
    <span class="sr-only">Loading</span>
  </div>
  <div class="spinner-grow text-danger">
    <span class="sr-only">Loading</span>
  </div>
  <div class="spinner-grow text-secondary">
    <span class="sr-only">Loading</span>
  </div>
 </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
</body>
</html>

 Output

Bootstrap Spinners

Spinner Buttons

We use spinners with buttons so that we can show whether the action is still in processing or has been done. We can remove the text from the button as per our need and also disable the button by using a disable attribute within the <button> element.

Syntax

<button class="btn btn-primary">
    <span class="spinner-border spinner-border-sm"></span>
    Loading..
  </button>

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Spinner Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
  <div class="container">
  <h2>Spinner Buttons</h2><br>
  <p><strong>Spinner button without text</strong></p>
  <button class="btn btn-primary">
    <span class="spinner-border spinner-border-sm"></span>
  </button>
<br><br>
  <p><strong>Spinner button with text</strong></p>
  <button class="btn btn-primary">
    <span class="spinner-border spinner-border-sm"></span>
    Loading..
  </button>
  <br><br>
  <p><strong>Spinner button with text and disabled attribute</strong></p>
  <button class="btn btn-primary" disabled>
    <span class="spinner-border spinner-border-sm"></span>
    Loading..
  </button>
  <br><br>
  <p><strong>Growing Spinner with text and disabled attribute</strong></p>
  <button class="btn btn-primary" disabled>
    <span class="spinner-grow spinner-grow-sm"></span>
    Loading..
  </button>
</div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
</body>
</html>

Output

Bootstrap Spinners

 

Related Topics

Bootstrap 4 Jumbotron

Bootstrap 4 Jumbotron Bootstrap offers Jumbotron, which is used to get more attention to specific content or information on the web page. It provides a gray background-color to the content to make that content...

2 minutes read.

Bootstrap Multiselect Dropdown

What is a multi-select Dropdown? Multi-select dropdown lists are used when we want to select multiple options for a particular record. Usually, dropdown lists provide the feature of choosing just one value...

4 minutes read.

Bootstrap 4 Margin classes

Bootstrap 4 contains a variety of brief, responsive margin and padding utility classes to change the appearance of an element. The Bootstrap 4 margin classes use for the outer spacing of...

8 minutes read.

Text Shadows in CSS

Text shadows are created with the text-shadow CSS property. It takes a list of shadows separated by commas to be applied to the text and any of its styles. Each...

5 minutes read.

Bootstrap 4 Dropdowns

Bootstrap Dropdowns Bootstrap 4 provides a dropdown component, which is a toggle and contextual layout, used to display a predefined list of links. It allows the user to select a value from the dropdown...

15 minutes read.

Bootstrap 4 navbar

A navigation navbar or navbar uses in every website to make it more user-friendly. Navigating through the website is easier, and the user can instantly search for the topic of...

8 minutes read.

Bootstrap Pager

← Prev Next → ...

1 minute read.

Bootstrap 4 Buttons

Bootstrap Buttons Bootstrap provides many custom button styles. These buttons are used in forms and dialog boxes for actions. Bootstrap offers various predefined classes for providing styles to buttons. There are many classes that are used...

7 minutes read.

Bootstrap 4 Grid System

Bootstrap 4 Grid Systems Bootstrap offers a responsive and mobile-first grid system with the help of which we can divide the screen of the web browser into 12 horizontal parts. It has predefined classes...

4 minutes read.

Bootstrap 4 Alerts

Bootstrap 4 Alerts Bootstrap 4 offers alerts that are used to provide feedback messages on the user’s actions. There is no boundation of text length in the alerts. Alerts can be created...

1 minute read.

Bootstrap 4 Spinners

Bootstrap 4 offers spinner is a loading indicator that is used to display the loading state of any component or web page. The spinner is also known as a loader...

7 minutes read.

Bootstrap 4 Media Objects

Bootstrap 4 Media Objects Bootstrap 4 offers a media object component that aligns the media objects and the content. The media object is used to create a repetitive and complex component...

7 minutes read.

Bootstrap Protocol (BOOTP)

In the following article, we will learn about the Bootstrap Protocol and how it maintains contracts among linked devices on webwork. What is Bootstrap Protocol? The Bootstrap Protocol is a webwork contract...

3 minutes read.

Bootstrap Badges and Labels

Bootstrap Badges Bootstrap Badges are numerical indicators. It is used to show that how many items are associated with a link.The .badge class is used to create of Bootstrap Badges. Let us see...

2 minutes read.

Bootstrap 4 Card

In Bootstrap 4, a card is a bordered box with padding around its content. It has options for headers, footers, colors, content, etc. The card provides the link, title, image,...

8 minutes read.

Bootstrap Typography

Bootstrap provides simple and easily customized typography for headings, body text, lists, and many more. Headline <h1> to <h6> By default, Bootstrap has HTML headings (<h1> to <h6>) that are given below: Example <h1>h1. Bootstrap heading</h1>   <h2>h2. Bootstrap heading</h2>   <h3>h3. Bootstrap heading</h3>   <h4>h4. Bootstrap heading</h4>   <h5>h5. Bootstrap heading</h5>   <h6>h6. Bootstrap heading</h6> Try Now ←...

1 minute read.

Bootstrap Validation Example

Validation We can provide valuable and actionable feedback to the users through an HTML form validation. It happens via custom styles or behaviors of default browsers and JavaScript. How does validation work...

4 minutes read.

Bootstrap 4 Progress Bar

Bootstrap Progress Bar Bootstrap 4 offers progress bars that are used to represent the progress of tasks such as downloading a file, software installation, etc. on the computer. It represents the percentage of the...

9 minutes read.

Bootstrap Input groups

Bootstrap 4 Input groups The input group is a component of Bootstrap 4, which is used to create interactive and stylish form controls. With the help of input groups, you can easily customize the input...

8 minutes read.

Bootstrap 4 Grid Classes

Bootstrap 4 Grid Classes Extra-small Grid – In the extra-small grid system class, when you create the grid (columns), the columns will not be stacked on top of each other on...

8 minutes read.