Bootstrap 4 Progress Bar

Bootstrap 4 progress bar is use to show a user progress, loading. Bootstrap uses CSS3 transitions and animations to perform progress bar effect.

Default Progress Bar

To create a basic progress bar, apply progress class in a div, than create another div with a class .progress-bar, than add a style attribute with the width expressed in a percentage indicates that the progress bar completion task.

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

Progress Bar Height: By Default, the height of the progress bar is 16px. Use the CSS height property to change it. Set the height for the progress container.

<div class="progress" style="height:35px;">
  <div class="progress-bar w-75"></div>
</div>

Progress Bars contextual classes

Progress Bars contextual classes that can be used with progress bars are:

.progress-bar (default : blue)
.progress-bar bg-success
.progress-bar bg-info
.progress-bar bg-warning
.progress-bar bg-danger 
.progress-bar bg-white
.progress-bar bg-secondary
.progress-bar bg-light
.progress-bar bg-dark

Striped Progress Bars

Use the .progress-bar-striped class to add stripes to the progress bars.

Animated Progress Bar

Add the .progress-bar-animated class to animate the progress bar.

Multiple Progress Bars

Progress bars can also be stacked

<div class="progress">
  <div class="progress-bar bg-success" style="width:30%">
    HTML 30%
  </div>
  <div class="progress-bar bg-warning" style="width:50%">
    CSS 50%
  </div>
  <div class="progress-bar bg-danger" style="width:20%">
    JavaScript 20%
  </div>
</div>