Progress
Basic Progress
<div class="progress mb-3" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 0%"></div>
</div>
<div class="progress mb-3" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 25%"></div>
</div>
<div class="progress mb-3" role="progressbar" aria-label="Basic example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 50%"></div>
</div>
<div class="progress mb-3" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 75%"></div>
</div>
<div class="progress mb-0" role="progressbar" aria-label="Basic example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 100%"></div>
</div> Different Colored Progress
<div class="progress mb-3" role="progressbar" aria-valuenow="20" aria-valuemin="0"
aria-valuemax="100">
<div class="progress-bar bg-secondary" style="width: 20%"></div>
</div>
<div class="progress mb-3" role="progressbar"
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-warning" style="width: 40%"></div>
</div>
<div class="progress mb-3" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-info" style="width: 60%"></div>
</div>
<div class="progress mb-3" role="progressbar"
aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-success" style="width: 80%"></div>
</div>
<div class="progress" role="progressbar"
aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-danger" style="width: 100%"></div>
</div> Striped Progress
<div class="progress mb-3" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped" style="width: 10%">
</div>
</div>
<div class="progress mb-3" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped bg-secondary" style="width: 25%">
</div>
</div>
<div class="progress mb-3" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped bg-success" style="width: 50%">
</div>
</div>
<div class="progress mb-3" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped bg-info" style="width: 75%">
</div>
</div>
<div class="progress" role="progressbar" aria-valuenow="100" aria-valuemin="0"
aria-valuemax="100">
<div class="progress-bar progress-bar-striped bg-warning" style="width: 100%"></div>
</div> Progress Height
<div class="progress progress-xs mb-3" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-primary" style="width: 10%">
</div>
</div>
<div class="progress progress-sm mb-3" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-primary" style="width: 25%">
</div>
</div>
<div class="progress mb-3" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-primary" style="width: 50%">
</div>
</div>
<div class="progress progress-lg mb-3" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-primary" style="width: 75%">
</div>
</div>
<div class="progress progress-xl" role="progressbar" aria-valuenow="100" aria-valuemin="0"
aria-valuemax="100">
<div class="progress-bar bg-primary" style="width: 100%"></div>
</div> Progress With Labels
10%
20%
40%
60%
80%
<div class="progress mb-3" role="progressbar"
aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 10%;">10%</div>
</div>
<div class="progress mb-3" role="progressbar"
aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-secondary" style="width: 20%;">20%</div>
</div>
<div class="progress mb-3" role="progressbar"
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-success" style="width: 40%;">40%</div>
</div>
<div class="progress mb-3" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-info" style="width: 60%;">60%</div>
</div>
<div class="progress mb-0" role="progressbar"
aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-warning" style="width: 80%;">80%</div>
</div> Multiple bars With Sizes
<div class="progress-stacked progress-xs mb-3">
<div class="progress-bar" role="progressbar" style="width: 5%"
aria-valuenow="5" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-secondary" role="progressbar" style="width: 10%"
aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-success" role="progressbar" style="width: 15%"
aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress-stacked progress-sm mb-3">
<div class="progress-bar bg-warning" role="progressbar" style="width: 10%"
aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-info" role="progressbar" style="width: 15%"
aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-danger" role="progressbar" style="width: 20%"
aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress-stacked mb-3">
<div class="progress-bar bg-info" 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: 20%"
aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar" role="progressbar" style="width: 25%"
aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress-stacked progress-lg mb-3">
<div class="progress-bar bg-purple" role="progressbar" style="width: 20%"
aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-teal" role="progressbar" style="width: 25%"
aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-orange" role="progressbar" style="width: 30%"
aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress-stacked progress-xl mb-0">
<div class="progress-bar bg-success" role="progressbar" style="width: 25%"
aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-danger" role="progressbar" style="width: 30%"
aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-warning" role="progressbar" style="width: 35%"
aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
</div> Animated Stripped Progress
<div class="progress mb-3" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped progress-bar-animated"
style="width: 10%"></div>
</div>
<div class="progress mb-3" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-secondary progress-bar-striped progress-bar-animated" style="width: 20%"></div>
</div>
<div class="progress mb-3" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-success progress-bar-striped progress-bar-animated" style="width: 40%"></div>
</div>
<div class="progress mb-3" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-info progress-bar-striped progress-bar-animated" style="width: 60%"></div>
</div>
<div class="progress" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" style="width: 80%"></div>
</div> Gradient Progress
<div class="progress mb-3" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-primary-gradient" style="width: 10%"></div>
</div>
<div class="progress mb-3" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-secondary-gradient" style="width: 20%"></div>
</div>
<div class="progress mb-3" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-success-gradient" style="width: 40%"></div>
</div>
<div class="progress mb-3" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-info-gradient" style="width: 60%"></div>
</div>
<div class="progress" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-warning-gradient" style="width: 80%"></div>
</div> Custom Animated Progress
<div class="progress mb-3 progress-animate" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-primary-gradient" style="width: 10%"></div>
</div>
<div class="progress mb-3 progress-animate" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-secondary-gradient" style="width: 20%"></div>
</div>
<div class="progress mb-3 progress-animate" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-success-gradient" style="width: 40%"></div>
</div>
<div class="progress mb-3 progress-animate" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-info-gradient" style="width: 60%"></div>
</div>
<div class="progress progress-animate" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-warning-gradient" style="width: 80%"></div>
</div> Custom Progress-1
Mobiles
50%
Watches
60%
Shirts
70%
<div class="progress progress-sm progress-custom mb-5 progress-animate" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
<h6 class="progress-bar-title">Mobiles</h6>
<div class="progress-bar" style="width: 50%">
<div class="progress-bar-value">50%</div>
</div>
</div>
<div class="progress progress-sm progress-custom mb-5 progress-animate" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
<h6 class="progress-bar-title bg-secondary">Watches</h6>
<div class="progress-bar bg-secondary" style="width: 60%">
<div class="progress-bar-value bg-secondary">60%</div>
</div>
</div>
<div class="progress progress-sm progress-custom progress-animate" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
<h6 class="progress-bar-title bg-success">Shirts</h6>
<div class="progress-bar bg-success" style="width: 70%">
<div class="progress-bar-value bg-success">70%</div>
</div>
</div> Custom Progress-2
<div class="progress progress-sm mb-4" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
<div class="progress-item-1 bg-primary"></div><div class="progress-item-2"></div><div class="progress-item-3"></div>
<div class="progress-bar" style="width: 50%"></div>
</div>
<div class="progress progress-sm mb-4" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
<div class="progress-item-1 bg-secondary"></div><div class="progress-item-2 bg-secondary"></div><div class="progress-item-3"></div>
<div class="progress-bar bg-secondary" style="width: 60%"></div>
</div>
<div class="progress progress-sm mb-4" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
<div class="progress-item-1 bg-success"></div><div class="progress-item-2 bg-success"></div><div class="progress-item-3"></div>
<div class="progress-bar bg-success" style="width: 70%"></div>
</div>
<div class="progress progress-sm mb-4" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
<div class="progress-item-1 bg-info"></div><div class="progress-item-2 bg-info"></div><div class="progress-item-3 bg-info"></div>
<div class="progress-bar bg-info" style="width: 80%"></div>
</div>
<div class="progress progress-sm" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
<div class="progress-item-1 bg-warning"></div><div class="progress-item-2 bg-warning"></div><div class="progress-item-3 bg-warning"></div>
<div class="progress-bar bg-warning" style="width: 90%"></div>
</div> Custom Progress-3
50%
60%
70%
<div class="progress progress-lg mb-5 custom-progress-3 progress-animate" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 50%">
<div class="progress-bar-value">50%</div>
</div>
</div>
<div class="progress progress-lg mb-5 custom-progress-3 progress-animate" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-secondary" style="width: 60%">
<div class="progress-bar-value secondary">60%</div>
</div>
</div>
<div class="progress progress-lg custom-progress-3 progress-animate" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-success" style="width: 70%">
<div class="progress-bar-value success">70%</div>
</div>
</div> Custom Progress-4
10%
20%
40%
60%
80%
90%
<div class="progress progress-xl mb-3 progress-animate custom-progress-4" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-primary-gradient" style="width: 10%"></div>
<div class="progress-bar-label">10%</div>
</div>
<div class="progress progress-xl mb-3 progress-animate custom-progress-4 secondary" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-secondary-gradient" style="width: 20%"></div>
<div class="progress-bar-label">20%</div>
</div>
<div class="progress progress-xl mb-3 progress-animate custom-progress-4 success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-success-gradient" style="width: 40%"></div>
<div class="progress-bar-label">40%</div>
</div>
<div class="progress progress-xl mb-3 progress-animate custom-progress-4 info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-info-gradient" style="width: 60%"></div>
<div class="progress-bar-label">60%</div>
</div>
<div class="progress progress-xl mb-3 progress-animate custom-progress-4 warning" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-warning-gradient" style="width: 80%"></div>
<div class="progress-bar-label">80%</div>
</div>
<div class="progress progress-xl progress-animate custom-progress-4 danger" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-danger-gradient" style="width: 90%"></div>
<div class="progress-bar-label">90%</div>
</div> Custom Progress-5
Project Dependencies
25%
35%
40%
Html25%
Css35%
Js40%
<h6 class="fw-semibold mb-2">Project Dependencies</h6>
<div class="progress-stacked progress-xl mb-5">
<div class="progress-bar" role="progressbar" style="width: 25%"
aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
<div class="progress-bar bg-secondary" role="progressbar" style="width: 35%"
aria-valuenow="35" aria-valuemin="0" aria-valuemax="100">35%</div>
<div class="progress-bar bg-danger" role="progressbar" style="width: 40%"
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">40%</div>
</div>
<div class="row justify-content-center">
<div class="col-xl-5">
<div class="border p-3">
<p class="fs-12 fw-semibold mb-0 text-muted">Html<span class="float-end fs-10 fw-normal">25%</span></p>
<div class="progress progress-xs mb-4 progress-animate" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-primary" style="width: 25%">
</div>
</div>
<p class="fs-12 fw-semibold mb-0 text-muted">Css<span class="float-end fs-10 fw-normal">35%</span></p>
<div class="progress progress-xs mb-4 progress-animate" role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-secondary" style="width: 35%">
</div>
</div>
<p class="fs-12 fw-semibold mb-0 text-muted">Js<span class="float-end fs-10 fw-normal">40%</span></p>
<div class="progress progress-xs mb-0 progress-animate" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-danger" style="width: 40%">
</div>
</div>
</div>
</div>
</div>