bootstrap-progressbar

jQuery plugin for twitter bootstrap's progressbar (v2 & v3) for displaying text and animations

Demo for Bootstrap 3.0.0

all examples have to be triggered manually by clicking the or button.

Horizontal

Vertical

Misc

Horizontal

default settings

basic progressbars
<div class="progress">
  <div class="progress-bar" role="progressbar" data-transitiongoal="75"></div>
</div>

$(document).ready(function() {
  $('.progress .progress-bar').progressbar();
});
themed progressbars
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal="100"></div>
</div>

$(document).ready(function() {
  $('.progress .progress-bar').progressbar();
});
striped progressbars
<div class="progress progress-striped">
  <div class="progress-bar" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal="100"></div>
</div>

$(document).ready(function() {
  $('.progress .progress-bar').progressbar();
});
animated progressbars
<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-striped" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal="100"></div>
</div>

$(document).ready(function() {
  $('.progress .progress-bar').progressbar();
});
custom aria range progressbars
<div class="progress progress-striped">
  <div class="progress-bar" role="progressbar" data-transitiongoal="2" aria-valuemin="1" aria-valuemax="6"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40" aria-valuemin="-40" aria-valuemax="200"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60" aria-valuemax="120"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80" aria-valuemin="30"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal="100"></div>
</div>

$(document).ready(function() {
  $('.progress .progress-bar').progressbar();
});
animation 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;
}

<div class="progress">
  <div class="progress-bar six-sec-ease-in-out" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-success six-sec-ease-in-out" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info six-sec-ease-in-out" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning six-sec-ease-in-out" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress">
  <div class="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
<div class="progress right">
  <div class="progress-bar" role="progressbar" data-transitiongoal="75"></div>
</div>

$(document).ready(function() {
  $('.progress .progress-bar').progressbar();
});
themed progressbars
<div class="progress right">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress right">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress right">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress right">
  <div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal="100"></div>
</div>

$(document).ready(function() {
  $('.progress .progress-bar').progressbar();
});
striped progressbars
<div class="progress progress-striped right">
  <div class="progress-bar" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress progress-striped right">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress progress-striped right">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress progress-striped right">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress progress-striped right">
  <div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal="100"></div>
</div>

$(document).ready(function() {
  $('.progress .progress-bar').progressbar();
});
animated progressbars
<div class="progress progress-striped active right">
  <div class="progress-bar progress-bar-striped" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress progress-striped active right">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress progress-striped active right">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress progress-striped active right">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress progress-striped active right">
  <div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal="100"></div>
</div>

$(document).ready(function() {
  $('.progress .progress-bar').progressbar();
});
custom aria range progressbars
<div class="progress progress-striped right">
  <div class="progress-bar" role="progressbar" data-transitiongoal="2" aria-valuemin="1" aria-valuemax="6"></div>
</div>
<div class="progress progress-striped right">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40" aria-valuemin="-40" aria-valuemax="200"></div>
</div>
<div class="progress progress-striped right">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60" aria-valuemax="120"></div>
</div>
<div class="progress progress-striped right">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80" aria-valuemin="30"></div>
</div>
<div class="progress progress-striped right">
  <div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal="100"></div>
</div>

$(document).ready(function() {
  $('.progress .progress-bar').progressbar();
});
animation 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;
}

<div class="progress right">
  <div class="progress-bar six-sec-ease-in-out" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress right">
  <div class="progress-bar progress-bar-success six-sec-ease-in-out" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress right">
  <div class="progress-bar progress-bar-info six-sec-ease-in-out" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress right">
  <div class="progress-bar progress-bar-warning six-sec-ease-in-out" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress right">
  <div class="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
<div class="progress">
  <div class="progress-bar" role="progressbar" data-transitiongoal="75"></div>
</div>

$(document).ready(function() {
  $('.progress .progress-bar').progressbar({display_text: 'fill'});
});
themed progressbars
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal="100"></div>
</div>

$(document).ready(function() {
  $('.progress .progress-bar').progressbar({display_text: 'fill'});
});
striped progressbars
<div class="progress progress-striped">
  <div class="progress-bar" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal="100"></div>
</div>

$(document).ready(function() {
  $('.progress .progress-bar').progressbar({display_text: 'fill'});
});
animated progressbars
<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-striped" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress progress-striped active">
  <div class="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
<div class="progress progress-striped">
  <div class="progress-bar" role="progressbar" data-transitiongoal="2" aria-valuemin="1" aria-valuemax="6"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40" aria-valuemin="-40" aria-valuemax="200"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60" aria-valuemax="120"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80" aria-valuemin="30"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal="100"></div>
</div>

$(document).ready(function() {
  $('.progress .progress-bar').progressbar({display_text: 'fill'});
});
animation 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;
}

<div class="progress">
  <div class="progress-bar six-sec-ease-in-out" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-success six-sec-ease-in-out" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info six-sec-ease-in-out" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning six-sec-ease-in-out" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress">
  <div class="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
<div class="progress">
  <div class="progress-bar" role="progressbar" data-transitiongoal="75"></div>
</div>

$(document).ready(function() {
  $('.progress .progress-bar').progressbar({display_text: 'fill', use_percentage: false});
});
themed progressbars
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress">
  <div class="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
<div class="progress progress-striped">
  <div class="progress-bar" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress progress-striped">
  <div class="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
<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-striped" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress progress-striped active">
  <div class="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
<div class="progress progress-striped">
  <div class="progress-bar" role="progressbar" data-transitiongoal="2" aria-valuemin="1" aria-valuemax="6"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40" aria-valuemin="-40" aria-valuemax="200"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60" aria-valuemax="120"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80" aria-valuemin="30"></div>
</div>
<div class="progress progress-striped">
  <div class="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});
});
animation 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;
}

<div class="progress">
  <div class="progress-bar six-sec-ease-in-out" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-success six-sec-ease-in-out" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info six-sec-ease-in-out" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning six-sec-ease-in-out" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress">
  <div class="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
<div class="progress">
  <div class="progress-bar" role="progressbar" data-transitiongoal="75"></div>
</div>

$(document).ready(function() {
  $('.progress .progress-bar').progressbar({display_text: 'center'});
});
themed progressbars
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal="100"></div>
</div>

$(document).ready(function() {
  $('.progress .progress-bar').progressbar({display_text: 'center'});
});
striped progressbars
<div class="progress progress-striped">
  <div class="progress-bar" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal="100"></div>
</div>

$(document).ready(function() {
  $('.progress .progress-bar').progressbar({display_text: 'center'});
});
animated progressbars
<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-striped" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress progress-striped active">
  <div class="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
<div class="progress progress-striped">
  <div class="progress-bar" role="progressbar" data-transitiongoal="2" aria-valuemin="1" aria-valuemax="6"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40" aria-valuemin="-40" aria-valuemax="200"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60" aria-valuemax="120"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80" aria-valuemin="30"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal="100"></div>
</div>

$(document).ready(function() {
  $('.progress .progress-bar').progressbar({display_text: 'center'});
});
animation 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;
}

<div class="progress">
  <div class="progress-bar six-sec-ease-in-out" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-success six-sec-ease-in-out" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info six-sec-ease-in-out" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning six-sec-ease-in-out" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress">
  <div class="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
<div class="progress">
  <div class="progress-bar" role="progressbar" data-transitiongoal="75"></div>
</div>

$(document).ready(function() {
  $('.progress .progress-bar').progressbar({display_text: 'center', use_percentage: false});
});
themed progressbars
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress">
  <div class="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
<div class="progress progress-striped">
  <div class="progress-bar" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress progress-striped">
  <div class="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
<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-striped" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress progress-striped active">
  <div class="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
<div class="progress progress-striped">
  <div class="progress-bar" role="progressbar" data-transitiongoal="2" aria-valuemin="1" aria-valuemax="6"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40" aria-valuemin="-40" aria-valuemax="200"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60" aria-valuemax="120"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80" aria-valuemin="30"></div>
</div>
<div class="progress progress-striped">
  <div class="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});
});
animation 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;
}

<div class="progress">
  <div class="progress-bar six-sec-ease-in-out" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-success six-sec-ease-in-out" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info six-sec-ease-in-out" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning six-sec-ease-in-out" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress">
  <div class="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
<div class="progress vertical">
  <div class="progress-bar" role="progressbar" data-transitiongoal="75"></div>
</div>

$(document).ready(function() {
  $('.progress .progress-bar').progressbar();
});
themed progressbars
<div class="progress vertical">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress vertical">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress vertical">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress vertical">
  <div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal="100"></div>
</div>

$(document).ready(function() {
  $('.progress .progress-bar').progressbar();
});
striped progressbars
<div class="progress progress-striped vertical">
  <div class="progress-bar" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress progress-striped vertical">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress progress-striped vertical">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress progress-striped vertical">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress progress-striped vertical">
  <div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal="100"></div>
</div>

$(document).ready(function() {
  $('.progress .progress-bar').progressbar();
});
animated progressbars
<div class="progress progress-striped active vertical">
  <div class="progress-bar progress-bar-striped" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress progress-striped active vertical">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress progress-striped active vertical">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress progress-striped active vertical">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress progress-striped active vertical">
  <div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal="100"></div>
</div>

$(document).ready(function() {
  $('.progress .progress-bar').progressbar();
});
custom aria range progressbars
<div class="progress progress-striped vertical">
  <div class="progress-bar" role="progressbar" data-transitiongoal="2" aria-valuemin="1" aria-valuemax="6"></div>
</div>
<div class="progress progress-striped vertical">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40" aria-valuemin="-40" aria-valuemax="200"></div>
</div>
<div class="progress progress-striped vertical">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60" aria-valuemax="120"></div>
</div>
<div class="progress progress-striped vertical">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80" aria-valuemin="30"></div>
</div>
<div class="progress progress-striped vertical">
  <div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal="100"></div>
</div>

$(document).ready(function() {
  $('.progress .progress-bar').progressbar();
});
animation 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;
}

<div class="progress vertical">
  <div class="progress-bar six-sec-ease-in-out" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress vertical">
  <div class="progress-bar progress-bar-success six-sec-ease-in-out" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress vertical">
  <div class="progress-bar progress-bar-info six-sec-ease-in-out" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress vertical">
  <div class="progress-bar progress-bar-warning six-sec-ease-in-out" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress vertical">
  <div class="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
<div class="progress vertical bottom">
  <div class="progress-bar" role="progressbar" data-transitiongoal="75"></div>
</div>

$(document).ready(function() {
  $('.progress .progress-bar').progressbar();
});
themed progressbars
<div class="progress vertical bottom">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress vertical bottom">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress vertical bottom">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress vertical bottom">
  <div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal="100"></div>
</div>

$(document).ready(function() {
  $('.progress .progress-bar').progressbar();
});
striped progressbars
<div class="progress progress-striped vertical bottom">
  <div class="progress-bar" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress progress-striped vertical bottom">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress progress-striped vertical bottom">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress progress-striped vertical bottom">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress progress-striped vertical bottom">
  <div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal="100"></div>
</div>

$(document).ready(function() {
  $('.progress .progress-bar').progressbar();
});
animated progressbars
<div class="progress progress-striped active vertical bottom">
  <div class="progress-bar progress-bar-striped" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress progress-striped active vertical bottom">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress progress-striped active vertical bottom">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress progress-striped active vertical bottom">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress progress-striped active vertical bottom">
  <div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal="100"></div>
</div>

$(document).ready(function() {
  $('.progress .progress-bar').progressbar();
});
custom aria range progressbars
<div class="progress progress-striped vertical bottom">
  <div class="progress-bar" role="progressbar" data-transitiongoal="2" aria-valuemin="1" aria-valuemax="6"></div>
</div>
<div class="progress progress-striped vertical bottom">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40" aria-valuemin="-40" aria-valuemax="200"></div>
</div>
<div class="progress progress-striped vertical bottom">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60" aria-valuemax="120"></div>
</div>
<div class="progress progress-striped vertical bottom">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80" aria-valuemin="30"></div>
</div>
<div class="progress progress-striped vertical bottom">
  <div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal="100"></div>
</div>

$(document).ready(function() {
  $('.progress .progress-bar').progressbar();
});
animation 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;
}

<div class="progress vertical bottom">
  <div class="progress-bar six-sec-ease-in-out" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress vertical bottom">
  <div class="progress-bar progress-bar-success six-sec-ease-in-out" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress vertical bottom">
  <div class="progress-bar progress-bar-info six-sec-ease-in-out" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress vertical bottom">
  <div class="progress-bar progress-bar-warning six-sec-ease-in-out" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress vertical bottom">
  <div class="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
<div class="progress vertical">
  <div class="progress-bar" role="progressbar" data-transitiongoal="75"></div>
</div>

$(document).ready(function() {
  $('.progress .progress-bar').progressbar({display_text: 'fill'});
});
themed progressbars
<div class="progress vertical">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress vertical">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress vertical">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress vertical">
  <div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal="100"></div>
</div>

$(document).ready(function() {
  $('.progress .progress-bar').progressbar({display_text: 'fill'});
});
striped progressbars
<div class="progress progress-striped vertical">
  <div class="progress-bar" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress progress-striped vertical">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress progress-striped vertical">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress progress-striped vertical">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress progress-striped vertical">
  <div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal="100"></div>
</div>

$(document).ready(function() {
  $('.progress .progress-bar').progressbar({display_text: 'fill'});
});
animated progressbars
<div class="progress progress-striped active vertical">
  <div class="progress-bar progress-bar-striped" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress progress-striped active vertical">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress progress-striped active vertical">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress progress-striped active vertical">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress progress-striped active vertical">
  <div class="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
<div class="progress progress-striped vertical">
  <div class="progress-bar" role="progressbar" data-transitiongoal="2" aria-valuemin="1" aria-valuemax="6"></div>
</div>
<div class="progress progress-striped vertical">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40" aria-valuemin="-40" aria-valuemax="200"></div>
</div>
<div class="progress progress-striped vertical">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60" aria-valuemax="120"></div>
</div>
<div class="progress progress-striped vertical">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80" aria-valuemin="30"></div>
</div>
<div class="progress progress-striped vertical">
  <div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal="100"></div>
</div>

$(document).ready(function() {
  $('.progress .progress-bar').progressbar({display_text: 'fill'});
});
animation 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;
}

<div class="progress vertical">
  <div class="progress-bar six-sec-ease-in-out" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress vertical">
  <div class="progress-bar progress-bar-success six-sec-ease-in-out" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress vertical">
  <div class="progress-bar progress-bar-info six-sec-ease-in-out" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress vertical">
  <div class="progress-bar progress-bar-warning six-sec-ease-in-out" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress vertical">
  <div class="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
<div class="progress vertical">
  <div class="progress-bar" role="progressbar" data-transitiongoal="75"></div>
</div>

$(document).ready(function() {
  $('.progress .progress-bar').progressbar({display_text: 'fill', use_percentage: false});
});
themed progressbars
<div class="progress vertical">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress vertical">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress vertical">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress vertical">
  <div class="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
<div class="progress progress-striped vertical">
  <div class="progress-bar" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress progress-striped vertical">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress progress-striped vertical">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress progress-striped vertical">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress progress-striped vertical">
  <div class="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
<div class="progress progress-striped active vertical">
  <div class="progress-bar progress-bar-striped" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress progress-striped active vertical">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress progress-striped active vertical">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress progress-striped active vertical">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress progress-striped active vertical">
  <div class="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
<div class="progress progress-striped vertical">
  <div class="progress-bar" role="progressbar" data-transitiongoal="2" aria-valuemin="1" aria-valuemax="6"></div>
</div>
<div class="progress progress-striped vertical">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40" aria-valuemin="-40" aria-valuemax="200"></div>
</div>
<div class="progress progress-striped vertical">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60" aria-valuemax="120"></div>
</div>
<div class="progress progress-striped vertical">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80" aria-valuemin="30"></div>
</div>
<div class="progress progress-striped vertical">
  <div class="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});
});
animation 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;
}

<div class="progress vertical">
  <div class="progress-bar six-sec-ease-in-out" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress vertical">
  <div class="progress-bar progress-bar-success six-sec-ease-in-out" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress vertical">
  <div class="progress-bar progress-bar-info six-sec-ease-in-out" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress vertical">
  <div class="progress-bar progress-bar-warning six-sec-ease-in-out" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress vertical">
  <div class="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
<div class="progress vertical">
  <div class="progress-bar" role="progressbar" data-transitiongoal="75"></div>
</div>

$(document).ready(function() {
  $('.progress .progress-bar').progressbar({display_text: 'center'});
});
themed progressbars
<div class="progress vertical">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress vertical">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress vertical">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress vertical">
  <div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal="100"></div>
</div>

$(document).ready(function() {
  $('.progress .progress-bar').progressbar({display_text: 'center'});
});
striped progressbars
<div class="progress progress-striped vertical">
  <div class="progress-bar" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress progress-striped vertical">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress progress-striped vertical">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress progress-striped vertical">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress progress-striped vertical">
  <div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal="100"></div>
</div>

$(document).ready(function() {
  $('.progress .progress-bar').progressbar({display_text: 'center'});
});
animated progressbars
<div class="progress progress-striped active vertical">
  <div class="progress-bar progress-bar-striped" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress progress-striped active vertical">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress progress-striped active vertical">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress progress-striped active vertical">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress progress-striped active vertical">
  <div class="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
<div class="progress progress-striped vertical">
  <div class="progress-bar" role="progressbar" data-transitiongoal="2" aria-valuemin="1" aria-valuemax="6"></div>
</div>
<div class="progress progress-striped vertical">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40" aria-valuemin="-40" aria-valuemax="200"></div>
</div>
<div class="progress progress-striped vertical">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60" aria-valuemax="120"></div>
</div>
<div class="progress progress-striped vertical">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80" aria-valuemin="30"></div>
</div>
<div class="progress progress-striped vertical">
  <div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal="100"></div>
</div>

$(document).ready(function() {
  $('.progress .progress-bar').progressbar({display_text: 'center'});
});
animation 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;
}

<div class="progress vertical">
  <div class="progress-bar six-sec-ease-in-out" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress vertical">
  <div class="progress-bar progress-bar-success six-sec-ease-in-out" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress vertical">
  <div class="progress-bar progress-bar-info six-sec-ease-in-out" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress vertical">
  <div class="progress-bar progress-bar-warning six-sec-ease-in-out" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress vertical">
  <div class="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
<div class="progress vertical">
  <div class="progress-bar" role="progressbar" data-transitiongoal="75"></div>
</div>

$(document).ready(function() {
  $('.progress .progress-bar').progressbar({display_text: 'center', use_percentage: false});
});
themed progressbars
<div class="progress vertical">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress vertical">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress vertical">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress vertical">
  <div class="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
<div class="progress progress-striped vertical">
  <div class="progress-bar" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress progress-striped vertical">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress progress-striped vertical">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress progress-striped vertical">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress progress-striped vertical">
  <div class="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
<div class="progress progress-striped active vertical">
  <div class="progress-bar progress-bar-striped" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress progress-striped active vertical">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress progress-striped active vertical">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress progress-striped active vertical">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress progress-striped active vertical">
  <div class="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
<div class="progress progress-striped vertical">
  <div class="progress-bar" role="progressbar" data-transitiongoal="2" aria-valuemin="1" aria-valuemax="6"></div>
</div>
<div class="progress progress-striped vertical">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40" aria-valuemin="-40" aria-valuemax="200"></div>
</div>
<div class="progress progress-striped vertical">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60" aria-valuemax="120"></div>
</div>
<div class="progress progress-striped vertical">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80" aria-valuemin="30"></div>
</div>
<div class="progress progress-striped vertical">
  <div class="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});
});
animation 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;
}

<div class="progress vertical">
  <div class="progress-bar six-sec-ease-in-out" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress vertical">
  <div class="progress-bar progress-bar-success six-sec-ease-in-out" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress vertical">
  <div class="progress-bar progress-bar-info six-sec-ease-in-out" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress vertical">
  <div class="progress-bar progress-bar-warning six-sec-ease-in-out" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress vertical">
  <div class="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
<div class="progress">
  <div class="progress-bar" role="progressbar" data-transitiongoal="75"></div>
</div>

$(document).ready(function() {
  $('.progress .progress-bar').progressbar({transition_delay: 3000});
});
themed progressbars
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal="100"></div>
</div>

$(document).ready(function() {
  $('.progress .progress-bar').progressbar({transition_delay: 3000});
});
striped progressbars
<div class="progress progress-striped">
  <div class="progress-bar" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal="100"></div>
</div>

$(document).ready(function() {
  $('.progress .progress-bar').progressbar({transition_delay: 3000});
});
animated progressbars
<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-striped" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress progress-striped active">
  <div class="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
<div class="progress progress-striped">
  <div class="progress-bar" role="progressbar" data-transitiongoal="2" aria-valuemin="1" aria-valuemax="6"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40" aria-valuemin="-40" aria-valuemax="200"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60" aria-valuemax="120"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80" aria-valuemin="30"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal="100"></div>
</div>

$(document).ready(function() {
  $('.progress .progress-bar').progressbar({transition_delay: 3000});
});
animation 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;
}

<div class="progress">
  <div class="progress-bar six-sec-ease-in-out" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-success six-sec-ease-in-out" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info six-sec-ease-in-out" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning six-sec-ease-in-out" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress">
  <div class="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
<div class="progress">
  <div class="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
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress">
  <div class="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
<div class="progress progress-striped">
  <div class="progress-bar" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress progress-striped">
  <div class="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
<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-striped" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress progress-striped active">
  <div class="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
<div class="progress progress-striped">
  <div class="progress-bar" role="progressbar" data-transitiongoal="2" aria-valuemin="1" aria-valuemax="6"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40" aria-valuemin="-40" aria-valuemax="200"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60" aria-valuemax="120"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80" aria-valuemin="30"></div>
</div>
<div class="progress progress-striped">
  <div class="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});
});
animation 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;
}

<div class="progress">
  <div class="progress-bar six-sec-ease-in-out" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-success six-sec-ease-in-out" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info six-sec-ease-in-out" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning six-sec-ease-in-out" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress">
  <div class="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
<div class="progress">
  <div class="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
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress">
  <div class="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
<div class="progress progress-striped">
  <div class="progress-bar" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress progress-striped">
  <div class="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
<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-striped" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress progress-striped active">
  <div class="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
<div class="progress progress-striped">
  <div class="progress-bar" role="progressbar" data-transitiongoal="2" aria-valuemin="1" aria-valuemax="6"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40" aria-valuemin="-40" aria-valuemax="200"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60" aria-valuemax="120"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80" aria-valuemin="30"></div>
</div>
<div class="progress progress-striped">
  <div class="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';}});
});
animation 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;
}

<div class="progress">
  <div class="progress-bar six-sec-ease-in-out" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-success six-sec-ease-in-out" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info six-sec-ease-in-out" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning six-sec-ease-in-out" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress">
  <div class="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
<div class="progress">
  <div class="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
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress">
  <div class="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
<div class="progress progress-striped">
  <div class="progress-bar" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress progress-striped">
  <div class="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
<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-striped" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress progress-striped active">
  <div class="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
<div class="progress progress-striped">
  <div class="progress-bar" role="progressbar" data-transitiongoal="2" aria-valuemin="1" aria-valuemax="6"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40" aria-valuemin="-40" aria-valuemax="200"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60" aria-valuemax="120"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80" aria-valuemin="30"></div>
</div>
<div class="progress progress-striped">
  <div class="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;}});
});
animation 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;
}

<div class="progress">
  <div class="progress-bar six-sec-ease-in-out" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-success six-sec-ease-in-out" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info six-sec-ease-in-out" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning six-sec-ease-in-out" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress">
  <div class="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
<div class="progress">
  <div class="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
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress">
  <div class="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
<div class="progress progress-striped">
  <div class="progress-bar" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress progress-striped">
  <div class="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
<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-striped" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress progress-striped active">
  <div class="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
<div class="progress progress-striped">
  <div class="progress-bar" role="progressbar" data-transitiongoal="2" aria-valuemin="1" aria-valuemax="6"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40" aria-valuemin="-40" aria-valuemax="200"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60" aria-valuemax="120"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80" aria-valuemin="30"></div>
</div>
<div class="progress progress-striped">
  <div class="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;}});
});
animation 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;
}

<div class="progress">
  <div class="progress-bar six-sec-ease-in-out" role="progressbar" data-transitiongoal="20"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-success six-sec-ease-in-out" role="progressbar" data-transitiongoal="40"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info six-sec-ease-in-out" role="progressbar" data-transitiongoal="60"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning six-sec-ease-in-out" role="progressbar" data-transitiongoal="80"></div>
</div>
<div class="progress">
  <div class="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:

<div class="progress">
  <div class="progress-bar" role="progressbar" data-transitiongoal="100"></div>
</div>
<span id="update"></span>
<span id="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;
}

<div class="progress">
  <div class="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:

<div class="progress">
  <div class="progress-bar" role="progressbar"></div>
</div>
<span id="error"></span>

$(document).ready(function() {
  $('.progress .progress-bar').progressbar({
    fail: function(error) { $('#error').html(error); }
  });
});
 

multi trigger

<div class="progress">
  <div class="progress-bar" role="progressbar"></div>
</div>
<button type="button" id="trigger-0">0</button>
<button type="button" id="trigger-50">50</button>
<button type="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'});
  });
});