Progress Barsv5.x

Progress bars provide completion statistics

Bootstrap v5.x | Progress Bars


%

25 | 50 | 75 | 100Clear

px

25 | 50 | 75 | 100Clear

Thick bar w/ Label
---- Thin bar --------
<div class="progress mb-3" role="progressbar" aria-label="Example 1px high" aria-valuenow="25" aria-valuemin="0"
   aria-valuemax="100" style="height: 8px">
   <div class="progress-bar" style="width: 25%"></div>
</div>

---- Thick bar w/ label --------
<div class="progress mb-2" role="progressbar" aria-label="Example 20px high" aria-valuenow="25" aria-valuemin="0"
   aria-valuemax="100" style="height: 50px">
   <div class="progress-bar" style="width: 25%">Thick bar w/ Label</div>
</div>
---- Alternate colors --------
<div class="progress mb-3 mt-4" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0"
   aria-valuemax="100">
   <div class="progress-bar bg-success" style="width: 25%"></div>
</div>
<div class="progress mb-3" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0"
   aria-valuemax="100">
   <div class="progress-bar bg-info" style="width: 50%"></div>
</div>
<div class="progress mb-3" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0"
   aria-valuemax="100">
   <div class="progress-bar bg-warning" style="width: 75%"></div>
</div>
<div class="progress mb-3" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0"
   aria-valuemax="100">
   <div class="progress-bar bg-danger" style="width: 100%"></div>
</div>
---- Striped --------
<div class="progress mb-3" role="progressbar" aria-label="Default striped example" aria-valuenow="10" aria-valuemin="0"
   aria-valuemax="100">
   <div class="progress-bar progress-bar-striped" style="width: 40%"></div>
</div>
---- Animated stripes --------
<div class="progress" role="progressbar" aria-label="Animated striped example" aria-valuenow="75" aria-valuemin="0"
   aria-valuemax="100">
   <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" style="width: 75%">
   </div>
</div>

This will reset the page. Are you sure?