Progress
Basic Progress
A basic progress in all different colors.
<div class="progress mg-b-20">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" class="progress-bar wd-25p" role="progressbar"></div>
</div>
<div class="progress mg-b-20">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="35" class="progress-bar bg-secondary wd-35p" role="progressbar"></div>
</div>
<div class="progress mg-b-20">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" class="progress-bar bg-info wd-50p" role="progressbar"></div>
</div>
<div class="progress mg-b-20">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="65" class="progress-bar bg-danger wd-65p" role="progressbar"></div>
</div>
<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" class="progress-bar bg-success wd-75p" role="progressbar"></div>
</div>
Striped Progress
A basic progress in all different colors.
<div class="progress mg-b-20">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" class="progress-bar progress-bar-striped wd-25p" role="progressbar"></div>
</div>
<div class="progress mg-b-20">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="35" class="progress-bar progress-bar-striped bg-secondary wd-35p" role="progressbar"></div>
</div>
<div class="progress mg-b-20">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" class="progress-bar progress-bar-striped bg-info wd-50p" role="progressbar"></div>
</div>
<div class="progress mg-b-20">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="65" class="progress-bar progress-bar-striped bg-danger wd-65p" role="progressbar"></div>
</div>
<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" class="progress-bar progress-bar-striped bg-success wd-75p" role="progressbar"></div>
</div>
Progress Sizes
A basic progress in different sizes.
<div class="progress mg-b-10">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" class="progress-bar ht-2 wd-25p" role="progressbar"></div>
</div>
<div class="progress mg-b-10">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="35" class="progress-bar bg-secondary ht-2 wd-35p" role="progressbar"></div>
</div>
<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" class="progress-bar bg-info ht-2 wd-50p" role="progressbar"></div>
</div>
<div class="progress mg-b-10">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" class="progress-bar progress-bar-xs wd-25p" role="progressbar"></div>
</div>
<div class="progress mg-b-10">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="35" class="progress-bar bg-secondary progress-bar-xs wd-35p" role="progressbar"></div>
</div>
<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" class="progress-bar bg-info progress-bar-xs wd-50p" role="progressbar"></div>
</div>
<div class="progress mg-b-10">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" class="progress-bar progress-bar-sm wd-25p" role="progressbar"></div>
</div>
<div class="progress mg-b-10">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="35" class="progress-bar bg-secondary progress-bar-sm wd-35p" role="progressbar"></div>
</div>
<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" class="progress-bar bg-info progress-bar-sm wd-50p" role="progressbar"></div>
</div>
<div class="progress mg-b-10">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" class="progress-bar wd-25p" role="progressbar"></div>
</div>
<div class="progress mg-b-10">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="35" class="progress-bar bg-secondary wd-35p" role="progressbar"></div>
</div>
<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" class="progress-bar bg-info wd-50p" role="progressbar"></div>
</div>
<div class="progress mg-b-10">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" class="progress-bar progress-bar-lg wd-25p" role="progressbar"></div>
</div>
<div class="progress mg-b-10">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="35" class="progress-bar bg-secondary progress-bar-lg wd-35p" role="progressbar"></div>
</div>
<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" class="progress-bar bg-info progress-bar-lg wd-50p" role="progressbar"></div>
</div>
Progress Label
A basic progress in different sizes.
<div class="progress mg-b-10">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" class="progress-bar progress-bar-lg wd-50p" role="progressbar">
50%
</div>
</div>
<div class="progress mg-b-10">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" class="progress-bar progress-bar-lg bg-secondary wd-60p" role="progressbar">
60%
</div>
</div>
<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="95" class="progress-bar progress-bar-lg bg-info wd-95p" role="progressbar">
95%
</div>
</div>
Animated Bars
The striped gradient can also be animated. Add .progress-bar-animated
to .progress-bar
to animate the stripes right to left via CSS3 animations.
<div class="progress mg-b-10">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 25%"></div>
</div>
<div class="progress mg-b-10">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-secondary" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 45%"></div>
</div>
<div class="progress mg-b-10">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 55%"></div>
</div>
<div class="progress mg-b-10">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 65%"></div>
</div>
<div class="progress mg-b-10">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 85%"></div>
</div>
Multiple Bars
Include multiple progress bars in a progress component if you need.
<div class="progress mg-b-10">
<div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-secondary" 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>
<div class="progress mg-b-10">
<div class="progress-bar bg-danger" 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-warning" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-teal" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-dark" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
</div>
HTML Project
Project status 35%
Wordpress Project
Project status 50%
Angular Project
Project status 40%
React Project
Project status 10%
PHP Project
Project status 70%