bootstrap-progressbar

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

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

Horizontal

default settings
default settings (right)
filled text
filled text (nonpercentage)
centered text
centered text (nonpercentage)

Vertical

default settings
default settings (bottom)
filled text
filled text (nonpercentage)
centered text
centered text (nonpercentage)

Misc

transition delay
refresh speed
custom percent format
custom amount format
custom amount format with min value
callbacks
callbacks using $this
error
multi trigger

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();
});

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;
}

<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();
});

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;
}

<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'});
});

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;
}

<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});
});

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;
}

<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'});
});

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;
}

<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});
});

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;
}

<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();
});

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;
}

<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();
});

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;
}

<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'});
});

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;
}

<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});
});

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;
}

<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'});
});

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;
}

<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});
});

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;
}

<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});
});

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;
}

<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});
});

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;
}

<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';}});
});

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;
}

<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;}});
});

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;
}

<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;}});
});

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;
}

<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'});
    });
});

Horizontal

default settings

basic progressbars start reset

themed progressbars start reset

striped progressbars start reset

animated progressbars start reset

custom aria range progressbars start reset

custom aria range progressbars start reset

default settings (right)

basic progressbars start reset

themed progressbars start reset

striped progressbars start reset

animated progressbars start reset

custom aria range progressbars start reset

custom aria range progressbars start reset

filled text

basic progressbars start reset

themed progressbars start reset

striped progressbars start reset

animated progressbars start reset

custom aria range progressbars start reset

custom aria range progressbars start reset

filled text (nonpercentage)

basic progressbars start reset

themed progressbars start reset

striped progressbars start reset

animated progressbars start reset

custom aria range progressbars start reset

custom aria range progressbars start reset

centered text

basic progressbars start reset

themed progressbars start reset

striped progressbars start reset

animated progressbars start reset

custom aria range progressbars start reset

custom aria range progressbars start reset

centered text (nonpercentage)

basic progressbars start reset

themed progressbars start reset

striped progressbars start reset

animated progressbars start reset

custom aria range progressbars start reset

custom aria range progressbars start reset

Vertical

default settings

basic progressbars start reset

themed progressbars start reset

striped progressbars start reset

animated progressbars start reset

custom aria range progressbars start reset

custom aria range progressbars start reset

default settings (bottom)

basic progressbars start reset

themed progressbars start reset

striped progressbars start reset

animated progressbars start reset

custom aria range progressbars start reset

custom aria range progressbars start reset

filled text

basic progressbars start reset

themed progressbars start reset

striped progressbars start reset

animated progressbars start reset

custom aria range progressbars start reset

custom aria range progressbars start reset

filled text (nonpercentage)

basic progressbars start reset

themed progressbars start reset

striped progressbars start reset

animated progressbars start reset

custom aria range progressbars start reset

custom aria range progressbars start reset

centered text

basic progressbars start reset

themed progressbars start reset

striped progressbars start reset

animated progressbars start reset

custom aria range progressbars start reset

custom aria range progressbars start reset

centered text (nonpercentage)

basic progressbars

themed progressbars

striped progressbars

animated progressbars

custom aria range progressbars

custom aria range progressbars

basic progressbars

themed progressbars

striped progressbars

animated progressbars

custom aria range progressbars

custom aria range progressbars

basic progressbars

themed progressbars

striped progressbars

animated progressbars

custom aria range progressbars

custom aria range progressbars

basic progressbars

themed progressbars

striped progressbars

animated progressbars

custom aria range progressbars

custom aria range progressbars

basic progressbars

themed progressbars

striped progressbars

animated progressbars

custom aria range progressbars

custom aria range progressbars

basic progressbars

themed progressbars

striped progressbars

animated progressbars

custom aria range progressbars

custom aria range progressbars

basic progressbars

themed progressbars

striped progressbars

animated progressbars

custom aria range progressbars

custom aria range progressbars

basic progressbars

themed progressbars

striped progressbars

animated progressbars

custom aria range progressbars

custom aria range progressbars

basic progressbars

themed progressbars

striped progressbars

animated progressbars

custom aria range progressbars

custom aria range progressbars

basic progressbars

themed progressbars

striped progressbars

animated progressbars

custom aria range progressbars

custom aria range progressbars

basic progressbars

themed progressbars

striped progressbars

animated progressbars

custom aria range progressbars

custom aria range progressbars

basic progressbars

themed progressbars

striped progressbars

animated progressbars

custom aria range progressbars

custom aria range progressbars

basic progressbars

themed progressbars

striped progressbars

animated progressbars

custom aria range progressbars

custom aria range progressbars

basic progressbars

themed progressbars