How to Use Bootstrap 4 Progress Bar?

Bootstrap Progress Bar: With this Bootstrap component you can use this to progress of the process to the users as completing to goes from 0 to 100%. With Bootstrap you can further add different styles, color, stack them, position it vertical, circular and add custom jquery to give it customized look. Following is simple example for bootstrap progress bar with default look.

• .progress as parent wrapper highlights the maximum value of the progress bar
• .progress-bar defines the current position of the progress
• You can custom specific hight, color, label on .progress-bar to further enhance its view to the users.
• Role and aria are used to make it easy for accessible to people with disability

---

Bootstrap 4 Progress Bar Example:

To build a bootstrap progress bar you need to use .progress class to the parent element and .progress-bar class to the child element respectively.

<div class="container">
  <h2>Bootstrap 4 Progress Bar Example</h2>
  <p>Here is a simple way of building default progress bar with Bootstrap</p>
  <div class="progress">
    <div class="progress-bar" style="width:70%"></div>
  </div>
</div>

---

Bootstrap Progress Bar CSS

Here is the default CSS with .progress class and respective values that are predefined with values on stripe and animated.

progress
{vertical-align:baseline}
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button{height:auto}
[type=search]{outline-offset:-2px;-webkit-appearance:none}
[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}

@-webkit-keyframes 
progress-bar-stripes{from{background-position:1rem 0}to{background-position:0 0}}

@keyframes 
progress-bar-stripes{from{background-position:1rem 0}to{background-position:0 0}}

.progress
{display:-ms-flexbox;
display:flex;height:1rem;
overflow:hidden;
font-size:.75rem;
background-color:#e9ecef;
border-radius:.25rem}

.progress-bar
{display:-ms-flexbox;
display:flex;
-ms-flex-direction:column;flex-direction:column;
-ms-flex-pack:center;justify-content:center;
color:#fff;text-align:center;
white-space:nowrap;
background-color:#007bff;
transition:width .6s ease}

@media screen and (prefers-reduced-motion:reduce)
{.progress-bar{transition:none}}

.progress-bar-striped
{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
background-size:1rem 1rem}

.progress-bar-animated
{-webkit-animation:progress-bar-stripes 1s linear infinite;animation:progress-bar-stripes 1s linear infinite}

---

Bootstrap Progress Bar Color (Background Color)

By default the color of the progress bar is blue (primary) and all the Bootstrap 4 contextual background classes can be applied to get the desired color effect.
bg-primary, .bg-secondary, bg-success, bg-info, bg-warning, bg-danger, .bg-light, .bg-dark, .bg-white, .bg-transparent all are available by using their specific class with progress respectively.

---

Bootstrap Progress Bar Height

By default the height of the progress bar 16px. To increase or decrease height you need to add specific CSS values which will result in making its height increase or decrease respectively. We need to set the same height for both containers .progress and .progress-bar to get the results as per your choice.

  <div class="progress" style="height:30px;">
    <div class="progress-bar" style="width:70%; height:30px;"></div>
  </div>

---

Bootstrap 4 Progress Bar Label

You can easily add specific label to the whole bootstrap progress bar by placing the text within .progress-bar element.

  <div class="progress">
    <div class="progress-bar" style="width:70%">Status</div>
  </div>

---

Bootstrap Progress Bar Striped

By using .progress-bar-striped class to the .progress-bar div you can give stripe behaviour to the progress bar.

---

Bootstrap 4 stacked progress bar

You can stack multiple progress bar by placing multiple progress inside one div only. Check the code to get the better understanding. Here is a image showing stacked progress bar in bootstrap.

---

Bootstrap Progress Bar Animation

By adding .progress-bar-animated class to the specific .progress-bar-striped which imparts CSS3 animations from left to right stripe movements.

---

Bootstrap Progress Bar Vertical

Progress bar default behaviour is horizontal and to make it vertical we will have to use specific CSS that imparts it vertical behaviour. Here is quick example with specific CSS and HTML Changes that will give Bootstrap 4 Progress bar vertical with custom color and values.

.progress-bar-vertical {  width: 20px;  min-height: 100px;  display: flex;  align-items: flex-end;
 margin-right: 20px;  float: left;}
.progress-bar-vertical .progress-bar {  width: 100%;  height: 0;  -webkit-transition: height 0.6s ease; -o-transition: height 0.6s ease;  transition: height 0.6s ease;}

---

Bootstrap 4 Progress Bar Circle

You can make the whole bootstrap progress bar circle to give better UI experience for viewers with custom HTML structure and CSS to make it look like circular in shape.

---

Bootstrap 4 Progress Bar Javascript

By adding Javascript you can add animation, function and do more with your bootstrap progress bar.

---

Bootstrap Progress Bar jQuery

You can add jQuery to give more customize solution to your bootstrap progress bar.

---

Bootstrap Progress Bar Ajax Example

Check how you can integrate Ajax and bootstrap together to make it work for your web layout.

---

Bootstrap File Upload with Progress Bar

You can also customize bootstrap progress bar for advanced use as File upload real time progress.

---

Bootstrap Progress Bar Template

Here is a quick template showing the use of Bootstrap progress bar with multiple types color, sizes and more.
Here is quick example of Bootstrap progress bar template with its main features and control with relation to color, height, multi bar, stacked, striped, animation, loading progress animation, Ajax, jQuery, file upload with example.

---

---