Progressbar
Progressbar.
Make use of Bootstrap's unique Progressbar styles to enhance actions in forms, dialogs, and various other elements, featuring comprehensive support for multiple sizes, states, and additional functionalities.
Progressbar on BootstrapProgressbar
Default Progress bars
Default progress bar style
<div class="progress">
<div class="progress-bar bg-danger" style="width: 60%; height:6px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>Striped Progress bar
add .progress-bar-striped to change the style
<div class="progress">
<div class="progress-bar bg-info progress-bar-striped" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%; height:10px;" role="progressbar">
<span class="sr-only">85% Complete (success)</span>
</div>
</div>Colored Progress bar
add bg-primary, .bg-danger, .bg-info to change the style
<div class="progress mt-3">
<div class="progress-bar bg-danger" style="width: 60%; height:6px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-info" style="width: 40%; height:6px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-success" style="width: 20%; height:6px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-primary" style="width: 30%; height:6px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-warning" style="width: 80%; height:6px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-inverse" style="width: 40%; height:6px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>Different bar sizes
add bg-primary, .bg-danger, .bg-info to change the style
<div class="progress mt-3">
<div class="progress-bar bg-danger" style="width: 60%; height:6px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-info" style="width: 40%; height:8px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-success" style="width: 20%; height:10px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-primary" style="width: 30%; height:12px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-warning" style="width: 80%; height:14px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>Animated Striped bar
add bg-primary, .bg-danger, .bg-info to change the style
<div class="progress mt-3">
<div class="progress-bar active progress-bar-striped bg-danger" style="width: 60%; height:6px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-info active progress-bar-striped" style="width: 40%; height:8px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-success active progress-bar-striped" style="width: 20%; height:10px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-primary active progress-bar-striped" style="width: 30%; height:12px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-warning active progress-bar-striped" style="width: 80%; height:14px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>Vertical Progress bars
add .progress-vertical to change the style
<div class="progress progress-vertical">
<div class="progress-bar bg-danger" style="width:4px; height:60%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-vertical">
<div class="progress-bar bg-info" style="width:4px; height:80%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-vertical">
<div class="progress-bar bg-success" style="width:4px; height:60%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-vertical">
<div class="progress-bar bg-primary" style="width:4px; height:40%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-vertical">
<div class="progress-bar bg-warning" style="width:4px; height:30%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
Vertical Progress From bottom
add .progress-vertical to change the style
<div class="progress progress-vertical-bottom">
<div class="progress-bar bg-danger" style="width:4px; height:60%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-vertical-bottom">
<div class="progress-bar bg-info" style="width:4px; height:80%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-vertical-bottom">
<div class="progress-bar bg-success" style="width:4px; height:60%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-vertical-bottom">
<div class="progress-bar bg-primary" style="width:4px; height:40%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-vertical-bottom">
<div class="progress-bar bg-warning" style="width:4px; height:30%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>Different size Progress bars
add .progress-vertical to change the style
<div class="progress progress-vertical">
<div class="progress-bar bg-danger" style="width:4px; height:60%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-vertical">
<div class="progress-bar bg-info" style="width:6px; height:80%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-vertical">
<div class="progress-bar bg-success" style="width:8px; height:60%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-vertical">
<div class="progress-bar bg-primary" style="width:10px; height:40%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-vertical">
<div class="progress-bar bg-warning" style="width:14px; height:30%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>Animated bars
add .progress-vertical to change the style
<div class="progress mt-3">
<div class="progress-bar bg-danger progress-animated" style="width: 60%; height:6px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-info progress-animated" style="width: 40%; height:6px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-success progress-animated" style="width: 20%; height:6px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-primary progress-animated" style="width: 30%; height:6px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-warning progress-animated" style="width: 80%; height:6px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-inverse progress-animated" style="width: 40%; height:6px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
SKILL BARS
add .progress-animated to change the style
Photoshop 85%
Code editor 90%
Illustrator 65%
<h6>Photoshop
<span class="pull-end">85%</span>
</h6>
<div class="progress ">
<div class="progress-bar bg-danger progress-animated" style="width: 85%; height:6px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<h6 class="mt-4">Code editor
<span class="pull-end">90%</span>
</h6>
<div class="progress">
<div class="progress-bar bg-info progress-animated" style="width: 90%; height:6px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<h6 class="mt-4">Illustrator
<span class="pull-end">65%</span>
</h6>
<div class="progress">
<div class="progress-bar bg-success progress-animated" style="width: 65%; height:6px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>