Progress
Default Progress
Use progress class to show default progress.
<!-- Base Examples -->
<div class="progress mb-4">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-4">
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-4">
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-4">
<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Progress with background color
Use bg- class to progress bar class with the below-mentioned color variation to set the background color progress bar.
<!-- Backgrounds -->
<div class="progress mb-4">
<div class="progress-bar bg-primary" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-4">
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-4">
<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-4">
<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Progress with Label
Add labels to your progress bars by placing text within the progress-bar.
<!-- Labels Example -->
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
Multiple Bars
Use bg- class to progress bar class with the below-mentioned color to change the appearance of individual progress bars.
<!-- Multiple Bars -->
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Height
Use progress-sm, progress-lg, or progress-xl class to set the different heights of progress.
Small Progress
Default Progress
Large Progress
Extra Large Progress
<!-- Prgress sm -->
<div class="progress progress-sm">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!-- Prgress Default -->
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 40%;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!-- Prgress lg -->
<div class="progress progress-lg">
<div class="progress-bar bg-warning" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!-- Prgress xl -->
<div class="progress progress-xl">
<div class="progress-bar bg-danger" role="progressbar" style="width: 70%;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Striped Progress
Use progress-bar-striped class to add strip to the progress.
<!-- Striped Prgress -->
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Animated Striped Progress
Use progress-bar-striped progress-bar-animated class to add strip with animation to the progress.
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>
Gradient Progress
Use bg-gradient class to show gradient progress bar.
<div class="progress">
<div class="progress-bar bg-primary bg-gradient" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-success bg-gradient" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-info bg-gradient" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-warning bg-gradient" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-danger bg-gradient" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Animated Progress
Use animated-progess class to show progress with animation.
<div class="progress animated-progess">
<div class="progress-bar bg-primary" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress animated-progess">
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress animated-progess">
<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress animated-progess">
<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress animated-progess">
<div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Custom Progress
Use animated-progess custom-progess class to show custom progress with animation.
<div class="progress animated-progess custom-progress mb-4">
<div class="progress-bar bg-primary" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress animated-progess custom-progress mb-4">
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress animated-progess custom-progress mb-4">
<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress animated-progess custom-progress mb-4">
<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress animated-progess custom-progress">
<div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Custom Progress with Label
Use animated-progess custom-progess progress-label class to show custom progress with animation and label.
<div class="d-flex align-items-center pb-2">
<div class="flex-shrink-0 me-3">
<div class="avatar-xs">
<div class="avatar-title bg-light rounded-circle text-muted fs-16">
<i class="mdi mdi-facebook"></i>
</div>
</div>
</div>
<div class="flex-grow-1">
<div class="progress animated-progess custom-progress progress-label">
<div class="progress-bar bg-primary" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"><div class="label">15%</div></div>
</div>
</div>
</div>
<div class="d-flex align-items-center py-2">
<div class="flex-shrink-0 me-3">
<div class="avatar-xs">
<div class="avatar-title bg-light rounded-circle text-muted fs-16">
<i class="mdi mdi-twitter"></i>
</div>
</div>
</div>
<div class="flex-grow-1">
<div class="progress animated-progess custom-progress progress-label">
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"><div class="label">25%</div></div>
</div>
</div>
</div>
<div class="d-flex align-items-center py-2">
<div class="flex-shrink-0 me-3">
<div class="avatar-xs">
<div class="avatar-title bg-light rounded-circle text-muted fs-16">
<i class="mdi mdi-github"></i>
</div>
</div>
</div>
<div class="flex-grow-1">
<div class="progress animated-progess custom-progress progress-label">
<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"><div class="label">30%</div></div>
</div>
</div>
</div>
Content Progress
Example of progress with content wrapped in progress.
30% Update in progress...
1 min left
60% Update in progress...
45s left
82% Update in progress...
25s left
<div class="card bg-light overflow-hidden">
<div class="card-body">
<div class="d-flex">
<div class="flex-grow-1">
<h6 class="mb-0"><b class="text-secondary">30%</b> Update in progress...</h6>
</div>
<div class="flex-shrink-0">
<h6 class="mb-0">1 min left</h6>
</div>
</div>
</div>
<div class="progress bg-secondary-subtle rounded-0">
<div class="progress-bar bg-secondary" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="card bg-light overflow-hidden">
<div class="card-body">
<div class="d-flex">
<div class="flex-grow-1">
<h6 class="mb-0"><b class="text-success">60%</b> Update in progress...</h6>
</div>
<div class="flex-shrink-0">
<h6 class="mb-0">45s left</h6>
</div>
</div>
</div>
<div class="progress bg-success-subtle rounded-0">
<div class="progress-bar bg-success" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="card bg-light overflow-hidden">
<div class="card-body">
<div class="d-flex">
<div class="flex-grow-1">
<h6 class="mb-0"><b class="text-danger">82%</b> Update in progress...</h6>
</div>
<div class="flex-shrink-0">
<h6 class="mb-0">25s left</h6>
</div>
</div>
</div>
<div class="progress bg-danger-subtle rounded-0">
<div class="progress-bar bg-danger" role="progressbar" style="width: 82%" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
Progress with Steps
Here is the example of progress which is represented by steps completion.
<div class="position-relative m-4">
<div class="progress" style="height: 1px;">
<div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<button type="button" class="position-absolute top-0 start-0 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">1</button>
<button type="button" class="position-absolute top-0 start-50 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">2</button>
<button type="button" class="position-absolute top-0 start-100 translate-middle btn btn-sm btn-light rounded-pill" style="width: 2rem; height:2rem;">3</button>
</div>
Step Progress with Arrow
Use progress-step-arrow class to create step progress with an arrow.
<div class="progress progress-step-arrow progress-info">
<a href="javascript:void(0);" class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">Step 1</a>
<a href="javascript:void(0);" class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"> Step 2</a>
<a href="javascript:void(0);" class="progress-bar bg-light text-body" role="progressbar" style="width: 100%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"> Step 3</a>
</div>;