所有的例子都可以用按钮控制 or

Horizontal

Vertical

Misc

Horizontal

default settings

basic progressbars 
<divclass="progress"><divclass="progress-bar"role="progressbar"data-transitiongoal="75"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar();});
themed progressbars 
<divclass="progress"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar();});
striped progressbars 
<divclass="progress progress-striped"><divclass="progress-bar"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar();});
animated progressbars 
<divclass="progress progress-striped active"><divclass="progress-bar progress-bar-striped"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress progress-striped active"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress progress-striped active"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress progress-striped active"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress progress-striped active"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar();});
custom aria range progressbars 
<divclass="progress progress-striped"><divclass="progress-bar"role="progressbar"data-transitiongoal="2"aria-valuemin="1"aria-valuemax="6"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"aria-valuemin="-40"aria-valuemax="200"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"aria-valuemax="120"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"aria-valuemin="30"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar();});
custom aria range progressbars 
.six-sec-ease-in-out {    -webkit-transition: width 6s ease-in-out;    -moz-transition: width 6s ease-in-out;    -ms-transition: width 6s ease-in-out;    -o-transition: width 6s ease-in-out;    transition: width 6s ease-in-out;}<divclass="progress"><divclass="progress-bar six-sec-ease-in-out"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress"><divclass="progress-bar progress-bar-success six-sec-ease-in-out"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress"><divclass="progress-bar progress-bar-info six-sec-ease-in-out"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress"><divclass="progress-bar progress-bar-warning six-sec-ease-in-out"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress"><divclass="progress-bar progress-bar-danger six-sec-ease-in-out"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar();});
 

default settings (right)

basic progressbars 
<divclass="progress right"><divclass="progress-bar"role="progressbar"data-transitiongoal="75"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar();});
themed progressbars 
<divclass="progress right"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress right"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress right"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress right"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar();});
striped progressbars 
<divclass="progress progress-striped right"><divclass="progress-bar"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress progress-striped right"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress progress-striped right"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress progress-striped right"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress progress-striped right"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar();});
animated progressbars 
<divclass="progress progress-striped active right"><divclass="progress-bar progress-bar-striped"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress progress-striped active right"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress progress-striped active right"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress progress-striped active right"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress progress-striped active right"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar();});
custom aria range progressbars 
<divclass="progress progress-striped right"><divclass="progress-bar"role="progressbar"data-transitiongoal="2"aria-valuemin="1"aria-valuemax="6"></div></div><divclass="progress progress-striped right"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"aria-valuemin="-40"aria-valuemax="200"></div></div><divclass="progress progress-striped right"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"aria-valuemax="120"></div></div><divclass="progress progress-striped right"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"aria-valuemin="30"></div></div><divclass="progress progress-striped right"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar();});
custom aria range progressbars 
.six-sec-ease-in-out {    -webkit-transition: width 6s ease-in-out;    -moz-transition: width 6s ease-in-out;    -ms-transition: width 6s ease-in-out;    -o-transition: width 6s ease-in-out;    transition: width 6s ease-in-out;}<divclass="progress right"><divclass="progress-bar six-sec-ease-in-out"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress right"><divclass="progress-bar progress-bar-success six-sec-ease-in-out"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress right"><divclass="progress-bar progress-bar-info six-sec-ease-in-out"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress right"><divclass="progress-bar progress-bar-warning six-sec-ease-in-out"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress right"><divclass="progress-bar progress-bar-danger six-sec-ease-in-out"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar();});
 

filled text

basic progressbars 
<divclass="progress"><divclass="progress-bar"role="progressbar"data-transitiongoal="75"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'fill'});});
themed progressbars 
<divclass="progress"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'fill'});});
striped progressbars 
<divclass="progress progress-striped"><divclass="progress-bar"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'fill'});});
animated progressbars 
<divclass="progress progress-striped active"><divclass="progress-bar progress-bar-striped"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress progress-striped active"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress progress-striped active"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress progress-striped active"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress progress-striped active"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'fill'});});
custom aria range progressbars 
<divclass="progress progress-striped"><divclass="progress-bar"role="progressbar"data-transitiongoal="2"aria-valuemin="1"aria-valuemax="6"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"aria-valuemin="-40"aria-valuemax="200"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"aria-valuemax="120"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"aria-valuemin="30"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'fill'});});
custom aria range progressbars 
.six-sec-ease-in-out {    -webkit-transition: width 6s ease-in-out;    -moz-transition: width 6s ease-in-out;    -ms-transition: width 6s ease-in-out;    -o-transition: width 6s ease-in-out;    transition: width 6s ease-in-out;}<divclass="progress"><divclass="progress-bar six-sec-ease-in-out"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress"><divclass="progress-bar progress-bar-success six-sec-ease-in-out"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress"><divclass="progress-bar progress-bar-info six-sec-ease-in-out"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress"><divclass="progress-bar progress-bar-warning six-sec-ease-in-out"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress"><divclass="progress-bar progress-bar-danger six-sec-ease-in-out"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'fill'});});
 

filled text (nonpercentage)

basic progressbars 
<divclass="progress"><divclass="progress-bar"role="progressbar"data-transitiongoal="75"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'fill', use_percentage: false});});
themed progressbars 
<divclass="progress"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'fill', use_percentage: false});});
striped progressbars 
<divclass="progress progress-striped"><divclass="progress-bar"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'fill', use_percentage: false});});
animated progressbars 
<divclass="progress progress-striped active"><divclass="progress-bar progress-bar-striped"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress progress-striped active"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress progress-striped active"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress progress-striped active"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress progress-striped active"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'fill', use_percentage: false});});
custom aria range progressbars 
<divclass="progress progress-striped"><divclass="progress-bar"role="progressbar"data-transitiongoal="2"aria-valuemin="1"aria-valuemax="6"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"aria-valuemin="-40"aria-valuemax="200"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"aria-valuemax="120"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"aria-valuemin="30"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'fill', use_percentage: false});});
custom aria range progressbars 
.six-sec-ease-in-out {    -webkit-transition: width 6s ease-in-out;    -moz-transition: width 6s ease-in-out;    -ms-transition: width 6s ease-in-out;    -o-transition: width 6s ease-in-out;    transition: width 6s ease-in-out;}<divclass="progress"><divclass="progress-bar six-sec-ease-in-out"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress"><divclass="progress-bar progress-bar-success six-sec-ease-in-out"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress"><divclass="progress-bar progress-bar-info six-sec-ease-in-out"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress"><divclass="progress-bar progress-bar-warning six-sec-ease-in-out"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress"><divclass="progress-bar progress-bar-danger six-sec-ease-in-out"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'fill', use_percentage: false});});
 

centered text

basic progressbars 
<divclass="progress"><divclass="progress-bar"role="progressbar"data-transitiongoal="75"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'center'});});
themed progressbars 
<divclass="progress"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'center'});});
striped progressbars 
<divclass="progress progress-striped"><divclass="progress-bar"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'center'});});
animated progressbars 
<divclass="progress progress-striped active"><divclass="progress-bar progress-bar-striped"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress progress-striped active"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress progress-striped active"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress progress-striped active"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress progress-striped active"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'center'});});
custom aria range progressbars 
<divclass="progress progress-striped"><divclass="progress-bar"role="progressbar"data-transitiongoal="2"aria-valuemin="1"aria-valuemax="6"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"aria-valuemin="-40"aria-valuemax="200"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"aria-valuemax="120"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"aria-valuemin="30"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'center'});});
custom aria range progressbars 
.six-sec-ease-in-out {    -webkit-transition: width 6s ease-in-out;    -moz-transition: width 6s ease-in-out;    -ms-transition: width 6s ease-in-out;    -o-transition: width 6s ease-in-out;    transition: width 6s ease-in-out;}<divclass="progress"><divclass="progress-bar six-sec-ease-in-out"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress"><divclass="progress-bar progress-bar-success six-sec-ease-in-out"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress"><divclass="progress-bar progress-bar-info six-sec-ease-in-out"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress"><divclass="progress-bar progress-bar-warning six-sec-ease-in-out"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress"><divclass="progress-bar progress-bar-danger six-sec-ease-in-out"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'center'});});
 

centered text (nonpercentage)

basic progressbars 
<divclass="progress"><divclass="progress-bar"role="progressbar"data-transitiongoal="75"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'center', use_percentage: false});});
themed progressbars 
<divclass="progress"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'center', use_percentage: false});});
striped progressbars 
<divclass="progress progress-striped"><divclass="progress-bar"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'center', use_percentage: false});});
animated progressbars 
<divclass="progress progress-striped active"><divclass="progress-bar progress-bar-striped"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress progress-striped active"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress progress-striped active"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress progress-striped active"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress progress-striped active"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'center', use_percentage: false});});
custom aria range progressbars 
<divclass="progress progress-striped"><divclass="progress-bar"role="progressbar"data-transitiongoal="2"aria-valuemin="1"aria-valuemax="6"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"aria-valuemin="-40"aria-valuemax="200"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"aria-valuemax="120"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"aria-valuemin="30"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'center', use_percentage: false});});
custom aria range progressbars 
.six-sec-ease-in-out {    -webkit-transition: width 6s ease-in-out;    -moz-transition: width 6s ease-in-out;    -ms-transition: width 6s ease-in-out;    -o-transition: width 6s ease-in-out;    transition: width 6s ease-in-out;}<divclass="progress"><divclass="progress-bar six-sec-ease-in-out"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress"><divclass="progress-bar progress-bar-success six-sec-ease-in-out"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress"><divclass="progress-bar progress-bar-info six-sec-ease-in-out"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress"><divclass="progress-bar progress-bar-warning six-sec-ease-in-out"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress"><divclass="progress-bar progress-bar-danger six-sec-ease-in-out"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'center', use_percentage: false});});
 

Vertical

default settings

basic progressbars 
<divclass="progress vertical"><divclass="progress-bar"role="progressbar"data-transitiongoal="75"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar();});
themed progressbars 
<divclass="progress vertical"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress vertical"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress vertical"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress vertical"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar();});
striped progressbars 
<divclass="progress progress-striped vertical"><divclass="progress-bar"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress progress-striped vertical"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress progress-striped vertical"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress progress-striped vertical"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress progress-striped vertical"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar();});
animated progressbars 
<divclass="progress progress-striped active vertical"><divclass="progress-bar progress-bar-striped"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress progress-striped active vertical"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress progress-striped active vertical"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress progress-striped active vertical"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress progress-striped active vertical"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar();});
custom aria range progressbars 
<divclass="progress progress-striped vertical"><divclass="progress-bar"role="progressbar"data-transitiongoal="2"aria-valuemin="1"aria-valuemax="6"></div></div><divclass="progress progress-striped vertical"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"aria-valuemin="-40"aria-valuemax="200"></div></div><divclass="progress progress-striped vertical"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"aria-valuemax="120"></div></div><divclass="progress progress-striped vertical"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"aria-valuemin="30"></div></div><divclass="progress progress-striped vertical"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar();});
custom aria range progressbars 
.six-sec-ease-in-out {    -webkit-transition: width 6s ease-in-out;    -moz-transition: width 6s ease-in-out;    -ms-transition: width 6s ease-in-out;    -o-transition: width 6s ease-in-out;    transition: width 6s ease-in-out;}<divclass="progress vertical"><divclass="progress-bar six-sec-ease-in-out"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress vertical"><divclass="progress-bar progress-bar-success six-sec-ease-in-out"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress vertical"><divclass="progress-bar progress-bar-info six-sec-ease-in-out"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress vertical"><divclass="progress-bar progress-bar-warning six-sec-ease-in-out"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress vertical"><divclass="progress-bar progress-bar-danger six-sec-ease-in-out"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar();});
 

default settings (bottom)

basic progressbars 
<divclass="progress vertical bottom"><divclass="progress-bar"role="progressbar"data-transitiongoal="75"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar();});
themed progressbars 
<divclass="progress vertical bottom"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress vertical bottom"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress vertical bottom"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress vertical bottom"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar();});
striped progressbars 
<divclass="progress progress-striped vertical bottom"><divclass="progress-bar"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress progress-striped vertical bottom"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress progress-striped vertical bottom"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress progress-striped vertical bottom"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress progress-striped vertical bottom"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar();});
animated progressbars 
<divclass="progress progress-striped active vertical bottom"><divclass="progress-bar progress-bar-striped"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress progress-striped active vertical bottom"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress progress-striped active vertical bottom"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress progress-striped active vertical bottom"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress progress-striped active vertical bottom"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar();});
custom aria range progressbars 
<divclass="progress progress-striped vertical bottom"><divclass="progress-bar"role="progressbar"data-transitiongoal="2"aria-valuemin="1"aria-valuemax="6"></div></div><divclass="progress progress-striped vertical bottom"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"aria-valuemin="-40"aria-valuemax="200"></div></div><divclass="progress progress-striped vertical bottom"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"aria-valuemax="120"></div></div><divclass="progress progress-striped vertical bottom"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"aria-valuemin="30"></div></div><divclass="progress progress-striped vertical bottom"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar();});
custom aria range progressbars 
.six-sec-ease-in-out {    -webkit-transition: width 6s ease-in-out;    -moz-transition: width 6s ease-in-out;    -ms-transition: width 6s ease-in-out;    -o-transition: width 6s ease-in-out;    transition: width 6s ease-in-out;}<divclass="progress vertical bottom"><divclass="progress-bar six-sec-ease-in-out"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress vertical bottom"><divclass="progress-bar progress-bar-success six-sec-ease-in-out"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress vertical bottom"><divclass="progress-bar progress-bar-info six-sec-ease-in-out"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress vertical bottom"><divclass="progress-bar progress-bar-warning six-sec-ease-in-out"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress vertical bottom"><divclass="progress-bar progress-bar-danger six-sec-ease-in-out"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar();});
 

filled text

basic progressbars 
<divclass="progress vertical"><divclass="progress-bar"role="progressbar"data-transitiongoal="75"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'fill'});});
themed progressbars 
<divclass="progress vertical"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress vertical"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress vertical"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress vertical"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'fill'});});
striped progressbars 
<divclass="progress progress-striped vertical"><divclass="progress-bar"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress progress-striped vertical"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress progress-striped vertical"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress progress-striped vertical"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress progress-striped vertical"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'fill'});});
animated progressbars 
<divclass="progress progress-striped active vertical"><divclass="progress-bar progress-bar-striped"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress progress-striped active vertical"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress progress-striped active vertical"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress progress-striped active vertical"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress progress-striped active vertical"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'fill'});});
custom aria range progressbars 
<divclass="progress progress-striped vertical"><divclass="progress-bar"role="progressbar"data-transitiongoal="2"aria-valuemin="1"aria-valuemax="6"></div></div><divclass="progress progress-striped vertical"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"aria-valuemin="-40"aria-valuemax="200"></div></div><divclass="progress progress-striped vertical"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"aria-valuemax="120"></div></div><divclass="progress progress-striped vertical"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"aria-valuemin="30"></div></div><divclass="progress progress-striped vertical"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'fill'});});
custom aria range progressbars 
.six-sec-ease-in-out {    -webkit-transition: width 6s ease-in-out;    -moz-transition: width 6s ease-in-out;    -ms-transition: width 6s ease-in-out;    -o-transition: width 6s ease-in-out;    transition: width 6s ease-in-out;}<divclass="progress vertical"><divclass="progress-bar six-sec-ease-in-out"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress vertical"><divclass="progress-bar progress-bar-success six-sec-ease-in-out"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress vertical"><divclass="progress-bar progress-bar-info six-sec-ease-in-out"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress vertical"><divclass="progress-bar progress-bar-warning six-sec-ease-in-out"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress vertical"><divclass="progress-bar progress-bar-danger six-sec-ease-in-out"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'fill'});});
 

filled text (nonpercentage)

basic progressbars 
<divclass="progress vertical"><divclass="progress-bar"role="progressbar"data-transitiongoal="75"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'fill', use_percentage: false});});
themed progressbars 
<divclass="progress vertical"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress vertical"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress vertical"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress vertical"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'fill', use_percentage: false});});
striped progressbars 
<divclass="progress progress-striped vertical"><divclass="progress-bar"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress progress-striped vertical"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress progress-striped vertical"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress progress-striped vertical"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress progress-striped vertical"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'fill', use_percentage: false});});
animated progressbars 
<divclass="progress progress-striped active vertical"><divclass="progress-bar progress-bar-striped"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress progress-striped active vertical"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress progress-striped active vertical"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress progress-striped active vertical"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress progress-striped active vertical"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'fill', use_percentage: false});});
custom aria range progressbars 
<divclass="progress progress-striped vertical"><divclass="progress-bar"role="progressbar"data-transitiongoal="2"aria-valuemin="1"aria-valuemax="6"></div></div><divclass="progress progress-striped vertical"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"aria-valuemin="-40"aria-valuemax="200"></div></div><divclass="progress progress-striped vertical"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"aria-valuemax="120"></div></div><divclass="progress progress-striped vertical"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"aria-valuemin="30"></div></div><divclass="progress progress-striped vertical"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'fill', use_percentage: false});});
custom aria range progressbars 
.six-sec-ease-in-out {    -webkit-transition: width 6s ease-in-out;    -moz-transition: width 6s ease-in-out;    -ms-transition: width 6s ease-in-out;    -o-transition: width 6s ease-in-out;    transition: width 6s ease-in-out;}<divclass="progress vertical"><divclass="progress-bar six-sec-ease-in-out"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress vertical"><divclass="progress-bar progress-bar-success six-sec-ease-in-out"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress vertical"><divclass="progress-bar progress-bar-info six-sec-ease-in-out"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress vertical"><divclass="progress-bar progress-bar-warning six-sec-ease-in-out"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress vertical"><divclass="progress-bar progress-bar-danger six-sec-ease-in-out"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'fill', use_percentage: false});});
 

centered text

basic progressbars 
<divclass="progress vertical"><divclass="progress-bar"role="progressbar"data-transitiongoal="75"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'center'});});
themed progressbars 
<divclass="progress vertical"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress vertical"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress vertical"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress vertical"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'center'});});
striped progressbars 
<divclass="progress progress-striped vertical"><divclass="progress-bar"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress progress-striped vertical"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress progress-striped vertical"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress progress-striped vertical"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress progress-striped vertical"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'center'});});
animated progressbars 
<divclass="progress progress-striped active vertical"><divclass="progress-bar progress-bar-striped"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress progress-striped active vertical"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress progress-striped active vertical"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress progress-striped active vertical"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress progress-striped active vertical"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'center'});});
custom aria range progressbars 
<divclass="progress progress-striped vertical"><divclass="progress-bar"role="progressbar"data-transitiongoal="2"aria-valuemin="1"aria-valuemax="6"></div></div><divclass="progress progress-striped vertical"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"aria-valuemin="-40"aria-valuemax="200"></div></div><divclass="progress progress-striped vertical"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"aria-valuemax="120"></div></div><divclass="progress progress-striped vertical"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"aria-valuemin="30"></div></div><divclass="progress progress-striped vertical"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'center'});});
custom aria range progressbars 
.six-sec-ease-in-out {    -webkit-transition: width 6s ease-in-out;    -moz-transition: width 6s ease-in-out;    -ms-transition: width 6s ease-in-out;    -o-transition: width 6s ease-in-out;    transition: width 6s ease-in-out;}<divclass="progress vertical"><divclass="progress-bar six-sec-ease-in-out"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress vertical"><divclass="progress-bar progress-bar-success six-sec-ease-in-out"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress vertical"><divclass="progress-bar progress-bar-info six-sec-ease-in-out"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress vertical"><divclass="progress-bar progress-bar-warning six-sec-ease-in-out"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress vertical"><divclass="progress-bar progress-bar-danger six-sec-ease-in-out"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'center'});});
 

centered text (nonpercentage)

basic progressbars 
<divclass="progress vertical"><divclass="progress-bar"role="progressbar"data-transitiongoal="75"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'center', use_percentage: false});});
themed progressbars 
<divclass="progress vertical"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress vertical"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress vertical"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress vertical"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'center', use_percentage: false});});
striped progressbars 
<divclass="progress progress-striped vertical"><divclass="progress-bar"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress progress-striped vertical"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress progress-striped vertical"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress progress-striped vertical"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress progress-striped vertical"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'center', use_percentage: false});});
animated progressbars 
<divclass="progress progress-striped active vertical"><divclass="progress-bar progress-bar-striped"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress progress-striped active vertical"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress progress-striped active vertical"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress progress-striped active vertical"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress progress-striped active vertical"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'center', use_percentage: false});});
custom aria range progressbars 
<divclass="progress progress-striped vertical"><divclass="progress-bar"role="progressbar"data-transitiongoal="2"aria-valuemin="1"aria-valuemax="6"></div></div><divclass="progress progress-striped vertical"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"aria-valuemin="-40"aria-valuemax="200"></div></div><divclass="progress progress-striped vertical"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"aria-valuemax="120"></div></div><divclass="progress progress-striped vertical"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"aria-valuemin="30"></div></div><divclass="progress progress-striped vertical"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'center', use_percentage: false});});
custom aria range progressbars 
.six-sec-ease-in-out {    -webkit-transition: width 6s ease-in-out;    -moz-transition: width 6s ease-in-out;    -ms-transition: width 6s ease-in-out;    -o-transition: width 6s ease-in-out;    transition: width 6s ease-in-out;}<divclass="progress vertical"><divclass="progress-bar six-sec-ease-in-out"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress vertical"><divclass="progress-bar progress-bar-success six-sec-ease-in-out"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress vertical"><divclass="progress-bar progress-bar-info six-sec-ease-in-out"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress vertical"><divclass="progress-bar progress-bar-warning six-sec-ease-in-out"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress vertical"><divclass="progress-bar progress-bar-danger six-sec-ease-in-out"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'center', use_percentage: false});});
 

Misc

transition delay

basic progressbars 
<divclass="progress"><divclass="progress-bar"role="progressbar"data-transitiongoal="75"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({transition_delay: 3000});});
themed progressbars 
<divclass="progress"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({transition_delay: 3000});});
striped progressbars 
<divclass="progress progress-striped"><divclass="progress-bar"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({transition_delay: 3000});});
animated progressbars 
<divclass="progress progress-striped active"><divclass="progress-bar progress-bar-striped"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress progress-striped active"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress progress-striped active"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress progress-striped active"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress progress-striped active"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({transition_delay: 3000});});
custom aria range progressbars 
<divclass="progress progress-striped"><divclass="progress-bar"role="progressbar"data-transitiongoal="2"aria-valuemin="1"aria-valuemax="6"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"aria-valuemin="-40"aria-valuemax="200"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"aria-valuemax="120"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"aria-valuemin="30"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({transition_delay: 3000});});
custom aria range progressbars 
.six-sec-ease-in-out {    -webkit-transition: width 6s ease-in-out;    -moz-transition: width 6s ease-in-out;    -ms-transition: width 6s ease-in-out;    -o-transition: width 6s ease-in-out;    transition: width 6s ease-in-out;}<divclass="progress"><divclass="progress-bar six-sec-ease-in-out"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress"><divclass="progress-bar progress-bar-success six-sec-ease-in-out"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress"><divclass="progress-bar progress-bar-info six-sec-ease-in-out"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress"><divclass="progress-bar progress-bar-warning six-sec-ease-in-out"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress"><divclass="progress-bar progress-bar-danger six-sec-ease-in-out"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({transition_delay: 3000});});
 

refresh speed

basic progressbars 
<divclass="progress"><divclass="progress-bar"role="progressbar"data-transitiongoal="75"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'center', use_percentage: false, refresh_speed: 500});});
themed progressbars 
<divclass="progress"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'center', use_percentage: false, refresh_speed: 500});});
striped progressbars 
<divclass="progress progress-striped"><divclass="progress-bar"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'center', use_percentage: false, refresh_speed: 500});});
animated progressbars 
<divclass="progress progress-striped active"><divclass="progress-bar progress-bar-striped"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress progress-striped active"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress progress-striped active"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress progress-striped active"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress progress-striped active"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'center', use_percentage: false, refresh_speed: 500});});
custom aria range progressbars 
<divclass="progress progress-striped"><divclass="progress-bar"role="progressbar"data-transitiongoal="2"aria-valuemin="1"aria-valuemax="6"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"aria-valuemin="-40"aria-valuemax="200"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"aria-valuemax="120"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"aria-valuemin="30"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'center', use_percentage: false, refresh_speed: 500});});
custom aria range progressbars 
.six-sec-ease-in-out {    -webkit-transition: width 6s ease-in-out;    -moz-transition: width 6s ease-in-out;    -ms-transition: width 6s ease-in-out;    -o-transition: width 6s ease-in-out;    transition: width 6s ease-in-out;}<divclass="progress"><divclass="progress-bar six-sec-ease-in-out"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress"><divclass="progress-bar progress-bar-success six-sec-ease-in-out"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress"><divclass="progress-bar progress-bar-info six-sec-ease-in-out"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress"><divclass="progress-bar progress-bar-warning six-sec-ease-in-out"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress"><divclass="progress-bar progress-bar-danger six-sec-ease-in-out"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'center', use_percentage: false, refresh_speed: 500});});
 

custom percent format

basic progressbars 
<divclass="progress"><divclass="progress-bar"role="progressbar"data-transitiongoal="75"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'center', percent_format: function(p) {return p + ' percent';}});});
themed progressbars 
<divclass="progress"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'center', percent_format: function(p) {return p + ' percent';}});});
striped progressbars 
<divclass="progress progress-striped"><divclass="progress-bar"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'center', percent_format: function(p) {return p + ' percent';}});});
animated progressbars 
<divclass="progress progress-striped active"><divclass="progress-bar progress-bar-striped"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress progress-striped active"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress progress-striped active"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress progress-striped active"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress progress-striped active"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'center', percent_format: function(p) {return p + ' percent';}});});
custom aria range progressbars 
<divclass="progress progress-striped"><divclass="progress-bar"role="progressbar"data-transitiongoal="2"aria-valuemin="1"aria-valuemax="6"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"aria-valuemin="-40"aria-valuemax="200"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"aria-valuemax="120"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"aria-valuemin="30"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'center', percent_format: function(p) {return p + ' percent';}});});
custom aria range progressbars 
.six-sec-ease-in-out {    -webkit-transition: width 6s ease-in-out;    -moz-transition: width 6s ease-in-out;    -ms-transition: width 6s ease-in-out;    -o-transition: width 6s ease-in-out;    transition: width 6s ease-in-out;}<divclass="progress"><divclass="progress-bar six-sec-ease-in-out"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress"><divclass="progress-bar progress-bar-success six-sec-ease-in-out"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress"><divclass="progress-bar progress-bar-info six-sec-ease-in-out"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress"><divclass="progress-bar progress-bar-warning six-sec-ease-in-out"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress"><divclass="progress-bar progress-bar-danger six-sec-ease-in-out"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'center', percent_format: function(p) {return p + ' percent';}});});
 

custom amount format

basic progressbars 
<divclass="progress"><divclass="progress-bar"role="progressbar"data-transitiongoal="75"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'center', use_percentage: false, amount_format: function(p, t) {return p + ' of ' + t;}});});
themed progressbars 
<divclass="progress"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'center', use_percentage: false, amount_format: function(p, t) {return p + ' of ' + t;}});});
striped progressbars 
<divclass="progress progress-striped"><divclass="progress-bar"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'center', use_percentage: false, amount_format: function(p, t) {return p + ' of ' + t;}});});
animated progressbars 
<divclass="progress progress-striped active"><divclass="progress-bar progress-bar-striped"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress progress-striped active"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress progress-striped active"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress progress-striped active"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress progress-striped active"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'center', use_percentage: false, amount_format: function(p, t) {return p + ' of ' + t;}});});
custom aria range progressbars 
<divclass="progress progress-striped"><divclass="progress-bar"role="progressbar"data-transitiongoal="2"aria-valuemin="1"aria-valuemax="6"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"aria-valuemin="-40"aria-valuemax="200"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"aria-valuemax="120"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"aria-valuemin="30"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'center', use_percentage: false, amount_format: function(p, t) {return p + ' of ' + t;}});});
custom aria range progressbars 
.six-sec-ease-in-out {    -webkit-transition: width 6s ease-in-out;    -moz-transition: width 6s ease-in-out;    -ms-transition: width 6s ease-in-out;    -o-transition: width 6s ease-in-out;    transition: width 6s ease-in-out;}<divclass="progress"><divclass="progress-bar six-sec-ease-in-out"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress"><divclass="progress-bar progress-bar-success six-sec-ease-in-out"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress"><divclass="progress-bar progress-bar-info six-sec-ease-in-out"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress"><divclass="progress-bar progress-bar-warning six-sec-ease-in-out"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress"><divclass="progress-bar progress-bar-danger six-sec-ease-in-out"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'center', use_percentage: false, amount_format: function(p, t) {return p + ' of ' + t;}});});
 

custom amount format with min value

basic progressbars 
<divclass="progress"><divclass="progress-bar"role="progressbar"data-transitiongoal="75"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'center', use_percentage: false, amount_format: function(p, max, min) {return 'min: ' + min + ' current: ' + p + ' max: ' + max;}});});
themed progressbars 
<divclass="progress"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'center', use_percentage: false, amount_format: function(p, max, min) {return 'min: ' + min + ' current: ' + p + ' max: ' + max;}});});
striped progressbars 
<divclass="progress progress-striped"><divclass="progress-bar"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'center', use_percentage: false, amount_format: function(p, max, min) {return 'min: ' + min + ' current: ' + p + ' max: ' + max;}});});
animated progressbars 
<divclass="progress progress-striped active"><divclass="progress-bar progress-bar-striped"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress progress-striped active"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress progress-striped active"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress progress-striped active"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress progress-striped active"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'center', use_percentage: false, amount_format: function(p, max, min) {return 'min: ' + min + ' current: ' + p + ' max: ' + max;}});});
custom aria range progressbars 
<divclass="progress progress-striped"><divclass="progress-bar"role="progressbar"data-transitiongoal="2"aria-valuemin="1"aria-valuemax="6"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-success"role="progressbar"data-transitiongoal="40"aria-valuemin="-40"aria-valuemax="200"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-info"role="progressbar"data-transitiongoal="60"aria-valuemax="120"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-warning"role="progressbar"data-transitiongoal="80"aria-valuemin="30"></div></div><divclass="progress progress-striped"><divclass="progress-bar progress-bar-danger"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'center', use_percentage: false, amount_format: function(p, max, min) {return 'min: ' + min + ' current: ' + p + ' max: ' + max;}});});
custom aria range progressbars 
.six-sec-ease-in-out {    -webkit-transition: width 6s ease-in-out;    -moz-transition: width 6s ease-in-out;    -ms-transition: width 6s ease-in-out;    -o-transition: width 6s ease-in-out;    transition: width 6s ease-in-out;}<divclass="progress"><divclass="progress-bar six-sec-ease-in-out"role="progressbar"data-transitiongoal="20"></div></div><divclass="progress"><divclass="progress-bar progress-bar-success six-sec-ease-in-out"role="progressbar"data-transitiongoal="40"></div></div><divclass="progress"><divclass="progress-bar progress-bar-info six-sec-ease-in-out"role="progressbar"data-transitiongoal="60"></div></div><divclass="progress"><divclass="progress-bar progress-bar-warning six-sec-ease-in-out"role="progressbar"data-transitiongoal="80"></div></div><divclass="progress"><divclass="progress-bar progress-bar-danger six-sec-ease-in-out"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({display_text: 'center', use_percentage: false, amount_format: function(p, max, min) {return 'min: ' + min + ' current: ' + p + ' max: ' + max;}});});
 

callbacks

update:

done: 

<divclass="progress"><divclass="progress-bar"role="progressbar"data-transitiongoal="100"></div></div><spanid="update"></span><spanid="done"></span>$(document).ready(function() {    $('.progress .progress-bar').progressbar({        update: function(current_percentage) { $('#update').html(current_percentage); },        done: function() { $('#done').html('yeah! done!'); }    });});
 

callbacks using $this 

.six-sec-ease-in-out {    -webkit-transition: width 6s ease-in-out;    -moz-transition: width 6s ease-in-out;    -ms-transition: width 6s ease-in-out;    -o-transition: width 6s ease-in-out;    transition: width 6s ease-in-out;}<divclass="progress"><divclass="progress-bar six-sec-ease-in-out"role="progressbar"data-transitiongoal="100"></div></div>$(document).ready(function() {    $('.progress .progress-bar').progressbar({        update: function(current_percentage, $this) {            $this.parent().parent().css('background-color', 'rgb(' + Math.round(current_percentage / 100 * 255) + ', 0, 0)');        }    });});
 

error

error: 

<divclass="progress"><divclass="progress-bar"role="progressbar"></div></div><spanid="error"></span>$(document).ready(function() {    $('.progress .progress-bar').progressbar({        fail: function(error) { $('#error').html(error); }    });});
 

multi trigger 

<divclass="progress"><divclass="progress-bar"role="progressbar"></div></div><buttontype="button"id="trigger-0">0</button><buttontype="button"id="trigger-50">50</button><buttontype="button"id="trigger-100">100</button>$(document).ready(function() {    var $pb = $('.progress .progress-bar');    $('#m-multi-trigger-0').click(function() {        $pb.attr('data-transitiongoal', 0).progressbar({display_text: 'center'});    });    $('#m-multi-trigger-50').click(function() {        $pb.attr('data-transitiongoal', 50).progressbar({display_text: 'center'});    });    $('#m-multi-trigger-100').click(function() {        $pb.attr('data-transitiongoal', 100).progressbar({display_text: 'center'});    });});