Fork me on GitHub

bootstrap-progressbar - v0.6.0

examples running with jQuery v1.8.3 and bootstrap v3.0.0-rc2

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

this is just plain default behavior.

Progressbar.defaults = {
    transition_delay: 300,
    refresh_speed: 50,
    display_text: 'none',
    use_percentage: true,
    update: $.noop,
    done: $.noop,
    fail: $.noop
};
                        

basic progressbar

<div class="progress">
    <div class="progress-bar" aria-valuetransitiongoal="75"></div>
</div>
                        

$('.progress-bar').progressbar();
                        

themed progressbars

<div class="progress">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar();
                        

striped progressbars

<div class="progress progress-striped">
    <div class="progress-bar" aria-valuetransitiongoal="20"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar();
                        

animated progressbars

<div class="progress progress-striped active">
    <div class="progress-bar" aria-valuetransitiongoal="20"></div>
</div>
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar();
                        

custom aria range

<div class="progress">
    <div class="progress-bar" aria-valuetransitiongoal="2" aria-valuemin="1" aria-valuemax="6"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40" aria-valuemin="-40" aria-valuemax="200"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60" aria-valuemax="120"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80" aria-valuemin="30" ></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar();
                        

custom animations

.progress .progress-bar.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" aria-valuetransitiongoal="20"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info six-sec-ease-in-out" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-success six-sec-ease-in-out" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning six-sec-ease-in-out" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger six-sec-ease-in-out" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar();
                        

this is just plain default behavior - right aligned.

Progressbar.defaults = {
    transition_delay: 300,
    refresh_speed: 50,
    display_text: 'none',
    use_percentage: true,
    update: $.noop,
    done: $.noop,
    fail: $.noop
};
                        

basic progressbar

<div class="progress right">
    <div class="progress-bar" aria-valuetransitiongoal="75"></div>
</div>
                        

$('.progress-bar').progressbar();
                        

themed progressbars

<div class="progress right">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress right">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress right">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress right">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar();
                        

striped progressbars

<div class="progress progress-striped right">
    <div class="progress-bar" aria-valuetransitiongoal="20"></div>
</div>
<div class="progress progress-striped right">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress progress-striped right">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress progress-striped right">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress progress-striped right">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar();
                        

animated progressbars

<div class="progress progress-striped right active">
    <div class="progress-bar" aria-valuetransitiongoal="20"></div>
</div>
<div class="progress progress-striped right active">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress progress-striped right active">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress progress-striped right active">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress progress-striped right active">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar();
                        

custom aria range

<div class="progress right">
    <div class="progress-bar" aria-valuetransitiongoal="2" aria-valuemin="1" aria-valuemax="6"></div>
</div>
<div class="progress right">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40" aria-valuemin="-40" aria-valuemax="200"></div>
</div>
<div class="progress right">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60" aria-valuemax="120"></div>
</div>
<div class="progress right">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80" aria-valuemin="30" ></div>
</div>
<div class="progress right">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar();
                        

custom animations

.progress .progress-bar.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" aria-valuetransitiongoal="20"></div>
</div>
<div class="progress right">
    <div class="progress-bar progress-bar-info six-sec-ease-in-out" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress right">
    <div class="progress-bar progress-bar-success six-sec-ease-in-out" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress right">
    <div class="progress-bar progress-bar-warning six-sec-ease-in-out" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress right">
    <div class="progress-bar progress-bar-danger six-sec-ease-in-out" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar();
                        

the following examples are showing how to display text on the filled bar.

basic progressbar

<div class="progress">
    <div class="progress-bar" aria-valuetransitiongoal="75"></div>
</div>
                        

$('.progress-bar').progressbar({display_text: 'fill'});
                        

themed progressbars

<div class="progress">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar({display_text: 'fill'});
                        

striped progressbars

<div class="progress progress-striped">
    <div class="progress-bar" aria-valuetransitiongoal="20"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar({display_text: 'fill'});
                        

animated progressbars

<div class="progress progress-striped active">
    <div class="progress-bar" aria-valuetransitiongoal="20"></div>
</div>
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar({display_text: 'fill'});
                        

custom aria range

<div class="progress">
    <div class="progress-bar" aria-valuetransitiongoal="2" aria-valuemin="1" aria-valuemax="6"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40" aria-valuemin="-40" aria-valuemax="200"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60" aria-valuemax="120"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80" aria-valuemin="30" ></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar({display_text: 'fill'});
                        

custom animations

.progress .progress-bar.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" aria-valuetransitiongoal="20"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info six-sec-ease-in-out" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-success six-sec-ease-in-out" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning six-sec-ease-in-out" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger six-sec-ease-in-out" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar({display_text: 'fill'});
                        

the following examples are showing how to display nonpercentage text on the filled bar.

basic progressbar

<div class="progress">
    <div class="progress-bar" aria-valuetransitiongoal="75"></div>
</div>
                        

$('.progress-bar').progressbar({
    display_text: 'fill',
    use_percentage: false
});
                        

themed progressbars

<div class="progress">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar({
    display_text: 'fill',
    use_percentage: false
});
                        

striped progressbars

<div class="progress progress-striped">
    <div class="progress-bar" aria-valuetransitiongoal="20"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar({
    display_text: 'fill',
    use_percentage: false
});
                        

animated progressbars

<div class="progress progress-striped active">
    <div class="progress-bar" aria-valuetransitiongoal="20"></div>
</div>
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar({
    display_text: 'fill',
    use_percentage: false
});
                        

custom aria range

<div class="progress">
    <div class="progress-bar" aria-valuetransitiongoal="2" aria-valuemin="1" aria-valuemax="6"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40" aria-valuemin="-40" aria-valuemax="200"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60" aria-valuemax="120"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80" aria-valuemin="30" ></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar({
    display_text: 'fill',
    use_percentage: false
});
                        

custom animations

.progress .progress-bar.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" aria-valuetransitiongoal="20"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info six-sec-ease-in-out" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-success six-sec-ease-in-out" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning six-sec-ease-in-out" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger six-sec-ease-in-out" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar({
    display_text: 'fill',
    use_percentage: false
});
                        

the following examples are showing how to display centered text on the bar.

basic progressbar

<div class="progress">
    <div class="progress-bar" aria-valuetransitiongoal="75"></div>
</div>
                        

$('.progress-bar').progressbar({display_text: 'center'});
                        

themed progressbars

<div class="progress">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar({display_text: 'center'});
                        

striped progressbars

<div class="progress progress-striped">
    <div class="progress-bar" aria-valuetransitiongoal="20"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar({display_text: 'center'});
                        

animated progressbars

<div class="progress progress-striped active">
    <div class="progress-bar" aria-valuetransitiongoal="20"></div>
</div>
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar({display_text: 'center'});
                        

custom aria range

<div class="progress">
    <div class="progress-bar" aria-valuetransitiongoal="2" aria-valuemin="1" aria-valuemax="6"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40" aria-valuemin="-40" aria-valuemax="200"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60" aria-valuemax="120"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80" aria-valuemin="30" ></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar({display_text: 'center'});
                        

custom animations

.progress .progress-bar.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" aria-valuetransitiongoal="20"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info six-sec-ease-in-out" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-success six-sec-ease-in-out" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning six-sec-ease-in-out" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger six-sec-ease-in-out" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar({display_text: 'center'});
                        

the following examples are showing how to display nonpercentage centered text on the bar.

basic progressbar

<div class="progress">
    <div class="progress-bar" aria-valuetransitiongoal="75"></div>
</div>
                        

$('.progress-bar').progressbar({
    display_text: 'center',
    use_percentage: false
});
                        

themed progressbars

<div class="progress">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar({
    display_text: 'center',
    use_percentage: false
});
                        

striped progressbars

<div class="progress progress-striped">
    <div class="progress-bar" aria-valuetransitiongoal="20"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar({
    display_text: 'center',
    use_percentage: false
});
                        

animated progressbars

<div class="progress progress-striped active">
    <div class="progress-bar" aria-valuetransitiongoal="20"></div>
</div>
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar({
    display_text: 'center',
    use_percentage: false
});
                        

custom aria range

<div class="progress">
    <div class="progress-bar" aria-valuetransitiongoal="2" aria-valuemin="1" aria-valuemax="6"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40" aria-valuemin="-40" aria-valuemax="200"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60" aria-valuemax="120"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80" aria-valuemin="30" ></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar({
    display_text: 'center',
    use_percentage: false
});
                        

custom animations

.progress .progress-bar.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" aria-valuetransitiongoal="20"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info six-sec-ease-in-out" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-success six-sec-ease-in-out" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning six-sec-ease-in-out" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger six-sec-ease-in-out" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar({
    display_text: 'center',
    use_percentage: false
});
                        

this is just plain default behavior.

Progressbar.defaults = {
    transition_delay: 300,
    refresh_speed: 50,
    display_text: 'none',
    use_percentage: true,
    update: $.noop,
    done: $.noop,
    fail: $.noop
};
                        

basic progressbar

<div class="progress vertical">
    <div class="progress-bar" aria-valuetransitiongoal="75"></div>
</div>
                        

$('.progress-bar').progressbar();
                        

themed progressbars

<div class="progress vertical">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar();
                        

striped progressbars

<div class="progress progress-striped vertical">
    <div class="progress-bar" aria-valuetransitiongoal="20"></div>
</div>
<div class="progress progress-striped vertical">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress progress-striped vertical">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress progress-striped vertical">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress progress-striped vertical">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar();
                        

animated progressbars

<div class="progress progress-striped vertical wide active">
    <div class="progress-bar" aria-valuetransitiongoal="20"></div>
</div>
<div class="progress progress-striped vertical wide active">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress progress-striped vertical wide active">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress progress-striped vertical wide active">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress progress-striped vertical wide active">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar();
                        

custom aria range

<div class="progress vertical">
    <div class="progress-bar" aria-valuetransitiongoal="2" aria-valuemin="1" aria-valuemax="6"></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40" aria-valuemin="-40" aria-valuemax="200"></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60" aria-valuemax="120"></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80" aria-valuemin="30" ></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar();
                        

custom animations

.progress.vertical .progress-bar.six-sec-ease-in-out {
    -webkit-transition: height 6s ease-in-out;
    -moz-transition: height 6s ease-in-out;
    -ms-transition: height 6s ease-in-out;
    -o-transition: height 6s ease-in-out;
    transition: height 6s ease-in-out;
}

                        

<div class="progress vertical">
    <div class="progress-bar six-sec-ease-in-out" aria-valuetransitiongoal="20"></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-info six-sec-ease-in-out" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-success six-sec-ease-in-out" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-warning six-sec-ease-in-out" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-danger six-sec-ease-in-out" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar();
                        

this is just plain default behavior - bottom aligned.

Progressbar.defaults = {
    transition_delay: 300,
    refresh_speed: 50,
    display_text: 'none',
    use_percentage: true,
    update: $.noop,
    done: $.noop,
    fail: $.noop
};
                        

basic progressbar

<div class="progress vertical bottom">
    <div class="progress-bar" aria-valuetransitiongoal="75"></div>
</div>
                        

$('.progress-bar').progressbar();
                        

themed progressbars

<div class="progress vertical bottom">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress vertical bottom">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress vertical bottom">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress vertical bottom">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar();
                        

striped progressbars

<div class="progress progress-striped vertical bottom">
    <div class="progress-bar" aria-valuetransitiongoal="20"></div>
</div>
<div class="progress progress-striped vertical bottom">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress progress-striped vertical bottom">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress progress-striped vertical bottom">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress progress-striped vertical bottom">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar();
                        

animated progressbars

<div class="progress progress-striped vertical bottom wide active">
    <div class="progress-bar" aria-valuetransitiongoal="20"></div>
</div>
<div class="progress progress-striped vertical bottom wide active">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress progress-striped vertical bottom wide active">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress progress-striped vertical bottom wide active">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress progress-striped vertical bottom wide active">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar();
                        

custom aria range

<div class="progress vertical bottom">
    <div class="progress-bar" aria-valuetransitiongoal="2" aria-valuemin="1" aria-valuemax="6"></div>
</div>
<div class="progress vertical bottom">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40" aria-valuemin="-40" aria-valuemax="200"></div>
</div>
<div class="progress vertical bottom">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60" aria-valuemax="120"></div>
</div>
<div class="progress vertical bottom">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80" aria-valuemin="30" ></div>
</div>
<div class="progress vertical bottom">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar();
                        

custom animations

.progress.vertical .progress-bar.six-sec-ease-in-out {
    -webkit-transition: height 6s ease-in-out;
    -moz-transition: height 6s ease-in-out;
    -ms-transition: height 6s ease-in-out;
    -o-transition: height 6s ease-in-out;
    transition: height 6s ease-in-out;
}

                        

<div class="progress vertical bottom">
    <div class="progress-bar six-sec-ease-in-out" aria-valuetransitiongoal="20"></div>
</div>
<div class="progress vertical bottom">
    <div class="progress-bar progress-bar-info six-sec-ease-in-out" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress vertical bottom">
    <div class="progress-bar progress-bar-success six-sec-ease-in-out" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress vertical bottom">
    <div class="progress-bar progress-bar-warning six-sec-ease-in-out" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress vertical bottom">
    <div class="progress-bar progress-bar-danger six-sec-ease-in-out" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar();
                        

the following examples are showing how to display text on the filled bar.

basic progressbar

<div class="progress vertical">
    <div class="progress-bar" aria-valuetransitiongoal="75"></div>
</div>
                        

$('.progress-bar').progressbar({display_text: 'fill'});
                        

themed progressbars

<div class="progress vertical">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar({display_text: 'fill'});
                        

striped progressbars

<div class="progress progress-striped vertical">
    <div class="progress-bar" aria-valuetransitiongoal="20"></div>
</div>
<div class="progress progress-striped vertical">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress progress-striped vertical">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress progress-striped vertical">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress progress-striped vertical">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar({display_text: 'fill'});
                        

animated progressbars

<div class="progress progress-striped vertical wide active">
    <div class="progress-bar" aria-valuetransitiongoal="20"></div>
</div>
<div class="progress progress-striped vertical wide active">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress progress-striped vertical wide active">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress progress-striped vertical wide active">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress progress-striped vertical wide active">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar({display_text: 'fill'});
                        

custom aria range

<div class="progress vertical">
    <div class="progress-bar" aria-valuetransitiongoal="2" aria-valuemin="1" aria-valuemax="6"></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40" aria-valuemin="-40" aria-valuemax="200"></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60" aria-valuemax="120"></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80" aria-valuemin="30" ></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar({display_text: 'fill'});
                        

custom animations

.progress.vertical .progress-bar.six-sec-ease-in-out {
    -webkit-transition: height 6s ease-in-out;
    -moz-transition: height 6s ease-in-out;
    -ms-transition: height 6s ease-in-out;
    -o-transition: height 6s ease-in-out;
    transition: height 6s ease-in-out;
}

                        

<div class="progress vertical">
    <div class="progress-bar six-sec-ease-in-out" aria-valuetransitiongoal="20"></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-info six-sec-ease-in-out" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-success six-sec-ease-in-out" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-warning six-sec-ease-in-out" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-danger six-sec-ease-in-out" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar({display_text: 'fill'});
                        

the following examples are showing how to display nonpercentage text on the filled bar.

basic progressbar

<div class="progress vertical">
    <div class="progress-bar" aria-valuetransitiongoal="75"></div>
</div>
                        

$('.progress-bar').progressbar({
    display_text: 'fill',
    use_percentage: false
});
                        

themed progressbars

<div class="progress vertical">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar({
    display_text: 'fill',
    use_percentage: false
});
                        

striped progressbars

<div class="progress progress-striped vertical">
    <div class="progress-bar" aria-valuetransitiongoal="20"></div>
</div>
<div class="progress progress-striped vertical">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress progress-striped vertical">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress progress-striped vertical">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress progress-striped vertical">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar({
    display_text: 'fill',
    use_percentage: false
});
                        

animated progressbars

<div class="progress progress-striped vertical wide active">
    <div class="progress-bar" aria-valuetransitiongoal="20"></div>
</div>
<div class="progress progress-striped vertical wide active">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress progress-striped vertical wide active">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress progress-striped vertical wide active">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress progress-striped vertical wide active">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar({
    display_text: 'fill',
    use_percentage: false
});
                        

custom aria range

<div class="progress vertical">
    <div class="progress-bar" aria-valuetransitiongoal="2" aria-valuemin="1" aria-valuemax="6"></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40" aria-valuemin="-40" aria-valuemax="200"></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60" aria-valuemax="120"></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80" aria-valuemin="30" ></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar({
    display_text: 'fill',
    use_percentage: false
});
                        

custom animations

.progress.vertical .progress-bar.six-sec-ease-in-out {
    -webkit-transition: height 6s ease-in-out;
    -moz-transition: height 6s ease-in-out;
    -ms-transition: height 6s ease-in-out;
    -o-transition: height 6s ease-in-out;
    transition: height 6s ease-in-out;
}

                        

<div class="progress vertical">
    <div class="progress-bar six-sec-ease-in-out" aria-valuetransitiongoal="20"></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-info six-sec-ease-in-out" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-success six-sec-ease-in-out" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-warning six-sec-ease-in-out" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-danger six-sec-ease-in-out" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar({
    display_text: 'fill',
    use_percentage: false
});
                        

the following examples are showing how to display centered text on the bar.

basic progressbar

<div class="progress vertical">
    <div class="progress-bar" aria-valuetransitiongoal="75"></div>
</div>
                        

$('.progress-bar').progressbar({display_text: 'center'});
                        

themed progressbars

<div class="progress vertical">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar({display_text: 'center'});
                        

striped progressbars

<div class="progress progress-striped vertical">
    <div class="progress-bar" aria-valuetransitiongoal="20"></div>
</div>
<div class="progress progress-striped vertical">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress progress-striped vertical">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress progress-striped vertical">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress progress-striped vertical">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar({display_text: 'center'});
                        

animated progressbars

<div class="progress progress-striped vertical wide active">
    <div class="progress-bar" aria-valuetransitiongoal="20"></div>
</div>
<div class="progress progress-striped vertical wide active">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress progress-striped vertical wide active">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress progress-striped vertical wide active">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress progress-striped vertical wide active">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar({display_text: 'center'});
                        

custom aria range

<div class="progress vertical">
    <div class="progress-bar" aria-valuetransitiongoal="2" aria-valuemin="1" aria-valuemax="6"></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40" aria-valuemin="-40" aria-valuemax="200"></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60" aria-valuemax="120"></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80" aria-valuemin="30" ></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar({display_text: 'center'});
                        

custom animations

.progress.vertical .progress-bar.six-sec-ease-in-out {
    -webkit-transition: height 6s ease-in-out;
    -moz-transition: height 6s ease-in-out;
    -ms-transition: height 6s ease-in-out;
    -o-transition: height 6s ease-in-out;
    transition: height 6s ease-in-out;
}

                        

<div class="progress vertical">
    <div class="progress-bar six-sec-ease-in-out" aria-valuetransitiongoal="20"></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-info six-sec-ease-in-out" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-success six-sec-ease-in-out" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-warning six-sec-ease-in-out" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-danger six-sec-ease-in-out" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar({display_text: 'center'});
                        

the following examples are showing how to display nonpercentage centered text on the bar.

basic progressbar

<div class="progress vertical">
    <div class="progress-bar" aria-valuetransitiongoal="75"></div>
</div>
                        

$('.progress-bar').progressbar({
    display_text: 'center',
    use_percentage: false
});
                        

themed progressbars

<div class="progress vertical">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar({
    display_text: 'center',
    use_percentage: false
});
                        

striped progressbars

<div class="progress progress-striped vertical">
    <div class="progress-bar" aria-valuetransitiongoal="20"></div>
</div>
<div class="progress progress-striped vertical">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress progress-striped vertical">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress progress-striped vertical">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress progress-striped vertical">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar({
    display_text: 'center',
    use_percentage: false
});
                        

animated progressbars

<div class="progress progress-striped vertical wide active">
    <div class="progress-bar" aria-valuetransitiongoal="20"></div>
</div>
<div class="progress progress-striped vertical wide active">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress progress-striped vertical wide active">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress progress-striped vertical wide active">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress progress-striped vertical wide active">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar({
    display_text: 'center',
    use_percentage: false
});
                        

custom aria range

<div class="progress vertical">
    <div class="progress-bar" aria-valuetransitiongoal="2" aria-valuemin="1" aria-valuemax="6"></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40" aria-valuemin="-40" aria-valuemax="200"></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60" aria-valuemax="120"></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80" aria-valuemin="30" ></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar({
    display_text: 'center',
    use_percentage: false
});
                        

custom animations

.progress.vertical .progress-bar.six-sec-ease-in-out {
    -webkit-transition: height 6s ease-in-out;
    -moz-transition: height 6s ease-in-out;
    -ms-transition: height 6s ease-in-out;
    -o-transition: height 6s ease-in-out;
    transition: height 6s ease-in-out;
}

                        

<div class="progress vertical">
    <div class="progress-bar six-sec-ease-in-out" aria-valuetransitiongoal="20"></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-info six-sec-ease-in-out" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-success six-sec-ease-in-out" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-warning six-sec-ease-in-out" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress vertical">
    <div class="progress-bar progress-bar-danger six-sec-ease-in-out" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar({
    display_text: 'center',
    use_percentage: false
});
                        

all other functionality and settings

delayed progressbars

<div class="progress">
    <div class="progress-bar" aria-valuetransitiongoal="20"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar({transition_delay: 3000});
                        

refresh speed progressbars

.progress .progress-bar.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" aria-valuetransitiongoal="20"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info six-sec-ease-in-out" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-success six-sec-ease-in-out" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning six-sec-ease-in-out" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger six-sec-ease-in-out" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar({
    display_text: 'center',
    use_percentage: false,
    refresh_speed: 500
});
                        

callbacks

update:

done:

<div class="progress">
    <div class="progress-bar" aria-valuetransitiongoal="100"></div>
</div>
<p>update: <span id="m-callback-update"></span></p>
<p>done: <span id="m-callback-done"></span></p>
                        

$(document).ready(function() {
    $('#m-callback').click(function() {
        $('.m-callback .progress-bar').progressbar({
            update: function(current_percentage) {
                $('#m-callback-update').html(current_percentage);
            },
            done: function() {
                $('#m-callback-done').html('yeah! done!');
            }
        });
    });
});
                        

error

error:

<div class="progress">
    <div class="progress-bar"></div>
</div>
<p>error: <span id="m-callback-error" style="color: red"></span></p>
                        

$(document).ready(function() {
    $('#m-callback').click(function() {
        $('.m-callback .progress-bar').progressbar({
            update: function(current_percentage) {
                $('#m-callback-update').html(current_percentage);
            },
            done: function() {
                $('#m-callback-done').html('yeah! done!');
            }
        });
    });
});
                        

custom percentage format

<div class="progress">
    <div class="progress-bar" aria-valuetransitiongoal="20"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar({
    display_text: 'center',
    percent_format: function(p) {return p + ' percent';}
});
                        

custom amount format

<div class="progress">
    <div class="progress-bar" aria-valuetransitiongoal="20"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info" aria-valuetransitiongoal="40"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="60"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" aria-valuetransitiongoal="80"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger" aria-valuetransitiongoal="100"></div>
</div>
                        

$('.progress-bar').progressbar({
    display_text: 'center',
    use_percentage: false,
    amount_format: function(p, t) {return p + ' of ' + t;}
});
                        

multi trigger

<div class="progress">
    <div class="progress-bar"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-success"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger"></div>
</div>
                        

var $ps = $('.progress-bar');
$('#m-multi-trigger-0').click(function() {
    $ps.attr('aria-valuetransitiongoal', 0).progressbar();
});
$('#m-multi-trigger-50').click(function() {
    $ps.attr('aria-valuetransitiongoal', 50).progressbar();
});
$('#m-multi-trigger-100').click(function() {
    $ps.attr('aria-valuetransitiongoal', 100).progressbar();
});