Colored bars
you can create any colors you want
Different bar sizes
you can create any size you want just give height to bar
Animated Striped bar
You can also use animated bar by just putting active class
<div class="progress m-t-30">
<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 m-t-30">
<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 m-t-30">
<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 m-t-30">
<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 m-t-30">
<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 m-t-30">
<div class="progress-bar bg-inverse" style="width: 40%; height:6px;" role="progressbar"> <span class="sr-only">60% Complete</span> </div>
</div>
<div class="progress m-t-30">
<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 m-t-30">
<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 m-t-30">
<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 m-t-30">
<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 m-t-30">
<div class="progress-bar bg-warning" style="width: 80%; height:14px;" role="progressbar"> <span class="sr-only">60% Complete</span> </div>
</div>
<div class="progress m-t-30">
<div class="progress-bar bg-danger progress-bar-striped progress-bar-animated" style="width: 60%; height:6px;" role="progressbar"> <span class="sr-only">60% Complete</span> </div>
</div>
<div class="progress m-t-30">
<div class="progress-bar bg-info progress-bar-striped progress-bar-animated" style="width: 40%; height:8px;" role="progressbar"> <span class="sr-only">60% Complete</span> </div>
</div>
<div class="progress m-t-30">
<div class="progress-bar bg-success progress-bar-striped progress-bar-animated" style="width: 20%; height:10px;" role="progressbar"> <span class="sr-only">60% Complete</span> </div>
</div>
<div class="progress m-t-30">
<div class="progress-bar bg-primary progress-bar-striped progress-bar-animated" style="width: 30%; height:12px;" role="progressbar"> <span class="sr-only">60% Complete</span> </div>
</div>
<div class="progress m-t-30">
<div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" style="width: 80%; height:14px;" role="progressbar"> <span class="sr-only">60% Complete</span> </div>
</div>
Skill Bars
you can create animated skill bar if you want just put wow animated progress-animated
Photoshop85%
Code editor90%
Illustrator65%
Dreamweaver85%
Coral Draw45%
Sketch25%
<!-- SKILL BARS -->
<div class="progress ">
<div class="progress-bar bg-danger wow animated progress-animated" style="width: 85%; height:6px;" role="progressbar"> <span class="sr-only">60% Complete</span> </div>
</div>