This tutorial explains Bootstrap 4 Progress Bar and Spinner. Learn different Bootstrap progress bars, progress bar height, Bootstrap spinner buttons, spinner sizes, etc:
In this tutorial, Bootstrap Progress Bar and Spinner, you will learn an introduction to Bootstrap 4 progress bars, progress bar height, progress bar animation, different Bootstrap progress bars, an introduction to Bootstrap spinners, colored spinners, growing spinners, spinner buttons, spinner sizes, and frequently asked questions.
Please note that we have used Bootstrap version 4 in all examples.
=> Visit Here To Learn Bootstrap From Scratch
Let’s begin!
Table of Contents:
Bootstrap Progress Bar And Spinner
The following table summarizes the classes that we have used in this tutorial.
| Class | Usage |
|---|---|
| The .progress class | This class is used to create a progress bar. It indicates the maximum value of the progress bar. |
| The .progress-bar class | This class is also used to create a progress bar. |
| The .bg-primary class | This class is used to add a blue color to the component. |
| The .bg-secondary class | This class is used to add a grey color to the component. |
| The .bg-success class | This class is used to add a green color to the component. |
| The .bg-danger class | This class is used to add a red color to the component. |
| The .bg-warning class | This class is used to add an orange color to the component. |
| The .bg-info class | This class is used to add a light blue color to the component. |
| The .bg-white class | This class is used to add a white color to the component. |
| The .bg-light class | This class is used to add a light grey color to the component. |
| The .bg-dark class | This class is used to add a dark grey color to the component. |
| The .progress-bar-striped class | This class is used to create a striped progress bar. |
| The .progress-bar-animated class | This class is used to create an animated progress bar. |
| The .spinner-border class | This class is used to create a spinner or the loading state indicator. |
| The .spinner-grow class | This class is used to create a growing spinner. |
| The .spinner-border-sm class | This class is used to create a smaller spinner. |
| The .spinner-grow-sm class | This class is used to create a smaller growing spinner. |
| The .text-primary class | This class is used to add a blue color to the loading state indicator. |
| The .text-secondary class | This class is used to add a grey color to the loading state indicator. |
| The .text-success class | This class is used to add a green color to the loading state indicator. |
| The .text-danger class | This class is used to add a red color to the loading state indicator. |
| The .text-warning class | This class is used to add an orange color to the loading state indicator. |
| The .text-info class | This class is used to add a light blue color to the loading state indicator. |
| The .text-light class | This class is used to add a light grey color to the loading state indicator. |
| The .text-dark class | This class is used to add a dark grey color to the loading state indicator. |
Bootstrap 4 Progress Bar
A progress bar is a graphical indicator that indicates the progress of a particular process. To create a basic progress bar, wrap a <div> element with the .progress-bar class in another <div> element with the .progress class.
Progress Bar Height And Progress Bar Labels
The default progress bar height is 16px. You can change the height of a progress bar by adding the CSS style class.
You can also add a label to a progress bar. It will be easy to understand what the progress bar indicates.
Progress Bars With Background Colors
Use the following classes for background colors to create colored progress bars.
- The .bg-primary class: This class is used to add a blue color to the component.
- The .bg-secondary class: This class is used to add a grey color to the component.
- The .bg-success class: This class is used to add a green color to the component.
- The .bg-danger class: This class is used to add red color to the component.
- The .bg-warning class: This class is used to add orange color to the component.
- The .bg-info class: This class is used to add a light blue color to the component.
- The .bg-white class: This class is used to add a white color to the component.
- The .bg-light class: This class is used to add a light grey color to the component.
- The .bg-dark class: This class is used to add a dark grey color to the component.
Note: By default, a progress bar has a blue color that is similar to the color of the .bg-primary class. Therefore, adding the .bg-primary class will not make any effect on the color of the progress bar.
Progress Bar Animation, Striped And Multiple Progress Bars
Add the .progress-bar-striped class and the .progress-bar-animated class to create a striped progress bar and an animated progress bar, respectively. Further, progress bars can be stacked to create multiple progress bars.
Examples of Progress Bar:
The below programming code shows a few examples of progress bars. You can try these examples by running the below programming code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-3">
<h6>Basic Progress Bar</h6>
<div class="progress mb-2">
<div class="progress-bar" style="width:60%"></div>
</div>
<h6>Progress Bar Height</h6>
<div class="progress mb-2" style="height:40px">
<div class="progress-bar" style="width:40%;height:40px"></div>
</div>
<h6>Progress Bar Labels</h6>
<div class="progress mb-2">
<div class="progress-bar" style="width:40%">40%</div>
</div>
<h6>Progress Bars with Contextual Background Classes</h6>
<div class="progress mb-2">
<div class="progress-bar bg-primary" style="width:10%"></div>
</div>
<div class="progress mb-2">
<div class="progress-bar bg-secondary" style="width:20%"></div>
</div>
<div class="progress mb-2">
<div class="progress-bar bg-success" style="width:30%"></div>
</div>
<div class="progress mb-2">
<div class="progress-bar bg-danger" style="width:40%"></div>
</div>
<div class="progress mb-2">
<div class="progress-bar bg-warning" style="width:50%"></div>
</div>
<div class="progress mb-2">
<div class="progress-bar bg-info" style="width:60%"></div>
</div>
<div class="progress border mb-2">
<div class="progress-bar bg-white" style="width:70%"></div>
</div>
<div class="progress border mb-2">
<div class="progress-bar bg-light" style="width:80%"></div>
</div>
<div class="progress mb-2">
<div class="progress-bar bg-dark" style="width:90%"></div>
</div>
<h6>Striped Progress Bar</h6>
<div class="progress mb-2">
<div class="progress-bar progress-bar-striped" style="width:60%"></div>
</div>
<h6>Animated Progress Bar</h6>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
</div>
<h6>Multiple Progress Bar</h6>
<div class="progress mb-3">
<div class="progress-bar bg-success" style="width:45%">
Free Space
</div>
<div class="progress-bar bg-warning" style="width:15%">
Warning
</div>
<div class="progress-bar bg-danger" style="width:25%">
Danger
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
The below screenshot shows the browser output of the above programming code:
Bootstrap 4 Spinner
A spinner indicates the loading state of a particular component or a process. They are also commonly known as Bootstrap loading spinners or loading state indicators. Add the .spinner-border class to create a basic spinner.
Spinners With Text Contextual Classes
Use the following text contextual classes to create colored loading state indicators:
- The .text-primary class: This class is used to add a blue color to the loading state indicator.
- The .text-secondary class: This class is used to add a grey color to the loading state indicator.
- The .text-success class: This class is used to add a green color to the loading state indicator.
- The .text-danger class: This class is used to add red color to the loading state indicator.
- The .text-warning class: This class is used to add orange color to the loading state indicator.
- The .text-info class: This class is used to add a light blue color to the loading state indicator.
- The .text-light class: This class is used to add a light grey color to the loading state indicator.
- The .text-dark class: This class is used to add a dark grey color to the loading state indicator.
Growing Spinners and Spinner Buttons
Add the .spinner-grow class to create a growing spinner. Further, you can use a spinner inside a button to create a spinner button.
Spinner Sizes
The default size of a spinner may not suitable for all situations. Therefore, depending on the situation, you can use one of the following two classes to make the spinner small:
- The .spinner-border-sm class
- The .spinner-grow-sm class
You can also change the size of the loading state indicator by changing the dimensions of the loading state indicator. To change the dimensions, use custom CSS or inline CSS.
Loading State Indicators: Examples
The below programming code shows a few examples of the loading state indicators. You can try these examples by running the below programming code:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <h6>Basic Spinner</h6> <div class="spinner-border"></div> <h6>Spinners with Text Color Utilities</h6> <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> <h6>Growing Spinners</h6> <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> <h6>Spinner Button</h6> <button class="btn btn-primary"> <span class="spinner-border"></span> Loading... </button> <h6>Smaller Spinner</h6> <div class="spinner-border spinner-border-sm"></div> <div class="spinner-grow spinner-grow-sm"></div> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
The below screenshot shows the browser output of the above programming code:
Alignments
Margin: You can add margin utilities (Ex. .m-2 class) for easy spacing.
Placement: You can add flexbox utilities, float utilities, or text alignment utilities for the proper placement of spinners.
Examples:
The below programming code shows a few examples related to alignments of spinners. You can try these examples by running the below programming code:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <h6>Margin</h6> <div class="spinner-border m-5" role="status"> <span class="sr-only">Loading...</span> </div> <h6>Flex</h6> <div class="d-flex justify-content-center"> <div class="spinner-border" role="status"> <span class="sr-only">Loading...</span> </div> </div> <h3>Float</h3> <div class="clearfix"> <div class="spinner-border float-right" role="status"> <span class="sr-only">Loading...</span> </div> </div> <h3>Text Align</h3> <div class="text-center"> <div class="spinner-border" role="status"> <span class="sr-only">Loading...</span> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
The below screenshot shows the browser output of the above programming code:
Frequently Asked Questions
In this section, we will discuss some of the FAQs of this topic. These questions will help you to prepare for your examinations and interviews confidently.
Q #1) What is a progress bar?
Answer: It is a graphical element that shows the progress of a particular process.
Q #2) How do I animate a progress bar?
Answer: Add the .progress-bar-animated class and the .progress-bar-striped class to animate a progress bar.
Q #3) How do I change the color of my progress bar?
Answer: You can use one of the classes for background colors such as the .bg-primary class, the .bg-secondary class, the .bg-success class, the .bg-danger class, the .bg-warning class, the .bg-info class, the .bg-white class, the .bg-light class and the .bg-dark class to change the color.
Q #4) What is a Bootstrap spinner?
Answer: It is an indicator for the loading state of a particular component or a process.
Q #5) What does spinner size mean?
Answer: It is the dimensions of the loading state indicator. Use the .spinner-border-sm class or the .spinner-grow-sm class to make the spinner small.
Q #6) How do I add color to my spinner?
Answer: You can use one of the text contextual classes such as the .text-primary class, the .text-secondary class, the .text-success class, the .text-danger class, the .text-warning class, the .text-info class, the .text-light class and the .text-dark class to add the color you want.
Conclusion
Spinners and progress bars are used as indicators. A progress bar is a graphical indicator while a spinner a loading state indicator. Bootstrap provides several styling options for progress bars and spinners. Bootstrap also uses contextual classes to add colors to progress bars and spinners.
Hope you have enjoyed this tutorial. Hope to see you soon with our next tutorial. Happy learning!
=> Check Out The Perfect Bootstrap Training Guide Here
Was this helpful?
Recommended Reading
-
In this introductory tutorial, we have covered What is Bootstrap and how to use it. We have also discussed Responsive web design, Mobile-first approach, history of Bootstrap, Migrating to Bootstrap 4 highlights, Browser, and device compatibility: We will explore the advantages of and how to use Bootstrap package, creating your…
-
This tutorial explains how to use Bootstrap Icons, Badges and Alerts. We have covered basic alert, alert styles, alert links, alerts with additional HTML elements, closing alerts, basic badge, badge styles, pill badges, actionable badges, badge inside a button, and various icons: Please note that we have used Bootstrap version…
-
This tutorial covers Bootstrap 4 buttons, buttons with contextual classes, links, tags, outline buttons, button of different sizes, block-level, button states, clear fix, etc: Please note that we have used Bootstrap version 4 in all examples. => Visit Here To Learn Bootstrap From Scratch Bootstrap Buttons Buttons are a very…
-
This tutorial explains all about Bootstrap 4 Typography including colors, fonts, headings, text alignment, background color, etc.: In this tutorial, we have covered headings, display headings, lead, inline text elements, text alignment, text wrapping, text truncate, word break, text-transform, font-weight, italics, monospace, reset color, text-decoration, colors, abbreviations, blockquotes, responsive font…
-
In this tutorial, we will discuss the Bootstrap dropdown, dropdowns with contextual classes, dropdown header, divider, sizes, active & disabled items, dropright, dropleft, dropup, dropdown right menu, dropdown text, split button dropdown, button group with dropdown etc.: Please note that we have used Bootstrap version 4 in all examples. =>…
-
This tutorial includes Bootstrap Containers, Bootstrap Grid System, Bootstrap Layout utilities, and Flex with examples: Please note that we have used Bootstrap version 4 for all examples. => Check Here To See A-Z Of Bootstrap Training Tutorials Bootstrap Containers A container is the most basic layout component in Bootstrap 4.…
-
Hands-on Bootstrap Tutorial Series for beginners: In this hands-on Bootstrap Tutorial Series for beginners, we have covered all Bootstrap 4 concepts with examples and sample programs. Target Audience For a better understanding of this tutorial series, you need to have a decent knowledge of HTML, CSS, and JavaScript. This tutorial…
-
In this tutorial, we have covered Bootstrap Button Group with contextual classes, button toolbar, button group sizes, vertical button groups, outline button group: Please note that we have used Bootstrap version 4 in all examples. => Check ALL Bootstrap Tutorials Here Bootstrap Button Group The Bootstrap Button group is similar…
