Bootstrap 5 Progress Bars


A progress bar is a graphical user interface (GUI) element that visualizes the progression of a task or process. It provides feedback to users about the completion status of an operation, indicating the amount of work that has been done and how much is left to be completed.

Basic Progress Bar

  • Use the .progress class for the container and the .progress-bar class for the actual progress bar.
Example 
<div class="progress">
  <div class="progress-bar" style="width:85%"></div>
</div>
Try it Yourself

Output:


Progress Bar Labels

  • Add label text to your progress bars by placing text within the .progress-bar div.
Example 
<div class="progress">
  <div class="progress-bar" style="width:85%">85%</div>
</div>
Try it Yourself

Output:


Progress Bar Height

  • You can control the height of the progress bar by adjusting the height of the .progress-bar class.
  • You can set the height using the height property in your custom CSS.
Example 
<div class="progress">
  <div class="progress-bar" style="width:40%;">40%</div>
</div>
<br>
<div class="progress" style="height:25px">
  <div class="progress-bar" style="width:50%;">50%</div>
</div>
<br>
<div class="progress" style="height:35px">
  <div class="progress-bar" style="width:70%;">70%</div>
</div>
Try it Yourself

Output:


Colored Progress Bars

  • To create colored progress bars, use bootstrap utility classes such as (.bg-success, .bg-info, .bg-warning, .bg-danger) to the progress-bar elements to give them different background colors.
Example 
<!-- primary -->
<div class="progress">
  <div class="progress-bar" style="width:10%"></div>
</div>

<!-- success -->
<div class="progress">
  <div class="progress-bar bg-success" style="width:20%"></div>
</div>

<!-- Info -->
<div class="progress">
  <div class="progress-bar bg-info" style="width:30%"></div>
</div>

<!-- Warning -->
<div class="progress">
   <div class="progress-bar bg-warning" style="width:40%"></div>
</div>

<!-- Danger -->
<div class="progress">
  <div class="progress-bar bg-danger" style="width:50%"></div>
</div>

<!-- White -->
<div class="progress border">
  <div class="progress-bar bg-white" style="width:60%"></div>
</div>

<!-- Grey -->
<div class="progress">
  <div class="progress-bar bg-secondary" style="width:70%"></div>
</div>

<!-- Light Grey -->
<div class="progress border">
  <div class="progress-bar bg-light" style="width:80%"></div>
</div>

<!-- Dark Grey -->
<div class="progress">
  <div class="progress-bar bg-dark" style="width:90%"></div>
</div>
Try it Yourself

Output:


Multiple Progress Bars

  • You can create stacked progress bars by placing multiple div elements with the class .progress-bar inside a single div with the class .progress . Each .progress-bar represents a different part of the overall progress.
Example 
<div class="progress">
  <div class="progress-bar bg-primary" style="width:50%">
    50%
  </div>
  <div class="progress-bar bg-success" style="width:10%">
    10%
  </div>
  <div class="progress-bar bg-danger" style="width:30%">
    30%
  </div>
</div>
Try it Yourself

Output:


Striped Progress Bars

  • Add .progress-bar-striped to .progress-bar to apply a stripes.
Example 
<div class="progress">
  <div class="progress-bar progress-bar-striped" style="width:60%"></div>
</div>
Try it Yourself

Output:


Animated Progress Bars

  • Add .progress-bar-animated to .progress-bar to apply a animated stripes right to left.
Example 
<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:60%"></div>
</div>
Try it Yourself

Output: