Progress Bars
Size Options
Bootstrap 92%
CoffeeScript 68%
HTML/CSS 78%
<h3 class="progress-label"> Bootstrap <span class="pull-right">92%</span> </h3> <div class="progress progress-xxs"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="92" aria-valuemin="0" aria-valuemax="100" style="width:92%"> </div> </div>Bootstrap 92%
CoffeeScript 68%
HTML/CSS 78%
<h3 class="progress-label"> Bootstrap <span class="pull-right">92%</span> </h3> <div class="progress progress-xs"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="92" aria-valuemin="0" aria-valuemax="100" style="width:92%"> </div> </div>Bootstrap 92%
CoffeeScript 68%
HTML/CSS 78%
<h3 class="progress-label"> Bootstrap <span class="pull-right">92%</span> </h3> <div class="progress progress-sm"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="92" aria-valuemin="0" aria-valuemax="100" style="width:92%"> </div> </div>Bootstrap 92%
CoffeeScript 68%
HTML/CSS 78%
<h3 class="progress-label"> Bootstrap <span class="pull-right">92%</span> </h3> <div class="progress"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="92" aria-valuemin="0" aria-valuemax="100" style="width:92%"> </div> </div>Color Options
Red 92%
Blue 68%
Green 78%
Aqua 78%
Yellow 92%
Brown 68%
Violet 78%
Orange 78%
Default Progress Bar
<div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:90%;"> </div> </div>Striped Progress Bar
<div class="progress progress-striped"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:90%;"> </div> </div>Animated Progress Bar
<div class="progress progress-striped active"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:90%;"> </div> </div>Stacked Progress Bar
<div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:90%;"> </div> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:30%;"> </div> </div>
