Bootstrap Progress
Bootstrap progress components can be used to show a user how far along he/she is in a process. These Bootstrap progress bars are built with two HTML elements, some CSS to set the width, and a few attributes. Now keep reading some examples to see how Bootstrap Progress bars work.
Example
Simple Progress
60%
60%
60%
60%
60%
60%
60%
60%
<div class="progress-wrapper">
<div class="progress-info">
<div class="progress-percentage">
<span class="text-sm font-weight-bold">60%</span>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
</div>
</div>
<div class="progress-wrapper">
<div class="progress-info">
<div class="progress-percentage">
<span class="text-sm font-weight-bold">60%</span>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-secondary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
</div>
</div>
<div class="progress-wrapper">
<div class="progress-info">
<div class="progress-percentage">
<span class="text-sm font-weight-bold">60%</span>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
</div>
</div>
<div class="progress-wrapper">
<div class="progress-info">
<div class="progress-percentage">
<span class="text-sm font-weight-bold">60%</span>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
</div>
</div>
<div class="progress-wrapper">
<div class="progress-info">
<div class="progress-percentage">
<span class="text-sm font-weight-bold">60%</span>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
</div>
</div>
<div class="progress-wrapper">
<div class="progress-info">
<div class="progress-percentage">
<span class="text-sm font-weight-bold">60%</span>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
</div>
</div>
<div class="progress-wrapper">
<div class="progress-info">
<div class="progress-percentage">
<span class="text-sm font-weight-bold">60%</span>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-light" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
</div>
</div>
<div class="progress-wrapper">
<div class="progress-info">
<div class="progress-percentage">
<span class="text-sm font-weight-bold">60%</span>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-dark" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
</div>
</div>Gradient Progress
60%
60%
60%
60%
60%
60%
60%
60%
<div class="progress-wrapper">
<div class="progress-info">
<div class="progress-percentage">
<span class="text-sm font-weight-bold">60%</span>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-gradient-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
</div>
</div>
<div class="progress-wrapper">
<div class="progress-info">
<div class="progress-percentage">
<span class="text-sm font-weight-bold">60%</span>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-gradient-secondary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
</div>
</div>
<div class="progress-wrapper">
<div class="progress-info">
<div class="progress-percentage">
<span class="text-sm font-weight-bold">60%</span>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-gradient-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
</div>
</div>
<div class="progress-wrapper">
<div class="progress-info">
<div class="progress-percentage">
<span class="text-sm font-weight-bold">60%</span>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-gradient-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
</div>
</div>
<div class="progress-wrapper">
<div class="progress-info">
<div class="progress-percentage">
<span class="text-sm font-weight-bold">60%</span>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-gradient-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
</div>
</div>
<div class="progress-wrapper">
<div class="progress-info">
<div class="progress-percentage">
<span class="text-sm font-weight-bold">60%</span>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-gradient-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
</div>
</div>
<div class="progress-wrapper">
<div class="progress-info">
<div class="progress-percentage">
<span class="text-sm font-weight-bold">60%</span>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-gradient-light" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
</div>
</div>
<div class="progress-wrapper">
<div class="progress-info">
<div class="progress-percentage">
<span class="text-sm font-weight-bold">60%</span>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-gradient-dark" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
</div>
</div>