Core Code
Core Code Modern Dev Handbook

BS5 Progress

Display task progress and loading states using Bootstrap 5 progress bars.
On this page

Basic progress bar

<div class="progress">
  <div class="progress-bar" style="width: 50%;"></div>
</div>

Progress with label

<div class="progress">
  <div class="progress-bar" style="width: 75%;">75%</div>
</div>

Contextual colors

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

Striped and animated

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated"
       style="width: 60%;">
  </div>
</div>

Multiple bars

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

BS5 Progress Examples (8)

example Basic Progress Bar open in new tab example Progress Bar with Label open in new tab example Contextual Progress Bars open in new tab example Striped Progress Bar open in new tab example Animated Progress Bar open in new tab example Stacked Progress Bars open in new tab example Custom Height Progress open in new tab example Task Progress Example open in new tab
BS5 Spinners →