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 Datepicker

What is a Bootstrap Datepicker? It is used to display a calendar with the date, month, and time from a dropdown menu. We will use an example to see how the date...

5 minutes read.

Bootstrap 4 Layout

Containers Containers are the essential elements of the bootstrap layout. It is required when we are using a bootstrap grid system. Containers can also be nested, but most layouts do not need nested containers. Bootstrap has...

3 minutes read.

Bootstrap First Example

1) Add HTML5 doctype Before starting the example of Bootstrap, we should know about the some basic rules of Bootstrap. We have to add HTML5 doctype with lang element and CSS properties. <!DOCTYPE html>   <html lang="en">     <head>       <meta charset="utf-8">      </head>   </html> 2) Bootstrap...

2 minutes read.

Bootstrap 4 Modal

Bootstrap 4 Modal The Modal is a component of Bootstrap 4, which is a dialog box or pop-up window. The modals are used to provide information or warning to the user, such as...

18 minutes read.

Bootstrap Grid System Example

Bootstrap Grid System Example Stacked to horizontal – In stacked to the horizontal grid system, the grid columns are stacked on top of each other on extra small devices and becomes...

7 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 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 4 List Groups

Bootstrap 4 List Groups Bootstrap 4 offers List Group component, which is used to display a series of content in an organized way. The most common list group is an unordered...

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

Bootstrap 4 Utilities

Bootstrap 4 Utilities Bootstrap 4 utilities also known as helper classes that are used to add more style to the components. Utilities are used to make the website or webpage more stylish or elegant....

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

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 Tabs and Pills

Bootstrap Menus Bootstrap menu is used to create different types of menu. It can created horizontal with its .list-inlineclass. <div class="container">       <h3>Example of Bootstrap Menu</h3>       <ul class="list-inline">         <li><a href="#">Home</a></li>         <li><a href="#">About</a></li>         <li><a href="#">Contact</a></li>         <li><a href="#">services</a></li>       </ul>     </div> Try Now Bootstrap Tabs Bootstrap tabl is look like is menu but there is some difference....

4 minutes read.

Bootstrap Time Picker Example

What is a Bootstrap Time picker? It is used to display the time in hours, minutes and seconds from a dropdown menu. In this section, we will create an example to...

4 minutes read.

Bootstrap 4 Collapse

Bootstrap 4 Collapse Collapse is a bootstrap component that is similar to the dropdown button. Collapse is used to hide or show the content such as paragraphs, sentences, etc.  When we click on a...

4 minutes 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.

Dropdown & Dropup

Bootstrap Dropdowns The bootstrap dropdown menu is used to create a toggleable menu. It provides users to choose one value from a predefined list. Before creating dropdown menu, we have to know...

3 minutes read.

Bootstrap 4 Popover

Bootstrap 4 Popover Popover A popover is similar to the tooltip. The only difference between tooltip and Popover is that in the tooltip, the popup box appears when you move the cursor...

6 minutes read.

CakePHP Layouts & Elements

A layout includes a presentation code that can be wrapped out in your view. It means that what you want to see in your view should be well-positioned in layout. When you create...

9 minutes read.

Bootstrap 4 Colors

Bootstrap 4 Colors Bootstrap 4 consists of classes that are used to set colors according to the context of the element, and with the help of these classes, we can read...

2 minutes read.