Progress Bar


A progress bar is used to visually indicate the progress of a task, such as file uploads, form completion, or loading states.

Default Progress Bar


<div class="progress">
    <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
    </div>
</div>

Active Progress Bar


<div class="progress">
    <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="30" aria-valuemax="100" style="width: 30%">
    </div>
</div>

Completed Progress Bar


<div class="progress">
    <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="100" aria-valuemax="100" style="width: 100%">
    </div>
</div>