Fork me on GitHub

bootstrap-progressbar - v0.7.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.

default settings

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" role="progressbar" aria-valuetransitiongoal="75"></div>
    </div>
                        

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

themed progressbars 

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

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

striped progressbars 

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

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

animated progressbars 

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

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

custom aria range 

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuetransitiongoal="2"
    aria-valuemin="1" aria-valuemax="6"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuetransitiongoal="40"
    aria-valuemin="-40" aria-valuemax="200"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuetransitiongoal="60"
    aria-valuemax="120"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuetransitiongoal="80"
    aria-valuemin="30" ></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-danger" role="progressbar" 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" role="progressbar" aria-valuetransitiongoal="20"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-info six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="40"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-success six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="60"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-warning six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="80"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-danger six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="100"></div>
    </div>
                        

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

default settings (right)

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" role="progressbar" aria-valuetransitiongoal="75"></div>
    </div>
                        

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

themed progressbars 

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

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

striped progressbars 

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

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

animated progressbars 

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

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

custom aria range 

<div class="progress right">
    <div class="progress-bar" role="progressbar" aria-valuetransitiongoal="2"
    aria-valuemin="1" aria-valuemax="6"></div>
    </div>
    <div class="progress right">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuetransitiongoal="40"
    aria-valuemin="-40" aria-valuemax="200"></div>
    </div>
    <div class="progress right">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuetransitiongoal="60"
    aria-valuemax="120"></div>
    </div>
    <div class="progress right">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuetransitiongoal="80"
    aria-valuemin="30" ></div>
    </div>
    <div class="progress right">
    <div class="progress-bar progress-bar-danger" role="progressbar" 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" role="progressbar" aria-valuetransitiongoal="20"></div>
    </div>
    <div class="progress right">
    <div class="progress-bar progress-bar-info six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="40"></div>
    </div>
    <div class="progress right">
    <div class="progress-bar progress-bar-success six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="60"></div>
    </div>
    <div class="progress right">
    <div class="progress-bar progress-bar-warning six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="80"></div>
    </div>
    <div class="progress right">
    <div class="progress-bar progress-bar-danger six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="100"></div>
    </div>
                        

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

filled text

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

basic progressbar 

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

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

themed progressbars 

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

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

striped progressbars 

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

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

animated progressbars 

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

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

custom aria range 

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuetransitiongoal="2"
    aria-valuemin="1" aria-valuemax="6"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuetransitiongoal="40"
    aria-valuemin="-40" aria-valuemax="200"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuetransitiongoal="60"
    aria-valuemax="120"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuetransitiongoal="80"
    aria-valuemin="30" ></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-danger" role="progressbar" 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" role="progressbar" aria-valuetransitiongoal="20"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-info six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="40"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-success six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="60"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-warning six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="80"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-danger six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="100"></div>
    </div>
                        

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

filled text (nonpercentage)

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

basic progressbar 

<div class="progress">
    <div class="progress-bar" role="progressbar" 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" role="progressbar" aria-valuetransitiongoal="40"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuetransitiongoal="60"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuetransitiongoal="80"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-danger" role="progressbar" 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" role="progressbar" aria-valuetransitiongoal="20"></div>
    </div>
    <div class="progress progress-striped">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuetransitiongoal="40"></div>
    </div>
    <div class="progress progress-striped">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuetransitiongoal="60"></div>
    </div>
    <div class="progress progress-striped">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuetransitiongoal="80"></div>
    </div>
    <div class="progress progress-striped">
    <div class="progress-bar progress-bar-danger" role="progressbar" 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" role="progressbar" aria-valuetransitiongoal="20"></div>
    </div>
    <div class="progress progress-striped active">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuetransitiongoal="40"></div>
    </div>
    <div class="progress progress-striped active">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuetransitiongoal="60"></div>
    </div>
    <div class="progress progress-striped active">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuetransitiongoal="80"></div>
    </div>
    <div class="progress progress-striped active">
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuetransitiongoal="100"></div>
    </div>
                        

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

custom aria range 

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuetransitiongoal="2"
    aria-valuemin="1" aria-valuemax="6"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuetransitiongoal="40"
    aria-valuemin="-40" aria-valuemax="200"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuetransitiongoal="60"
    aria-valuemax="120"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuetransitiongoal="80"
    aria-valuemin="30" ></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-danger" role="progressbar" 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" role="progressbar" aria-valuetransitiongoal="20"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-info six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="40"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-success six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="60"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-warning six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="80"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-danger six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="100"></div>
    </div>
                        

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

centered text

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

basic progressbar 

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

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

themed progressbars 

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

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

striped progressbars 

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

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

animated progressbars 

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

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

custom aria range 

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuetransitiongoal="2"
    aria-valuemin="1" aria-valuemax="6"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuetransitiongoal="40"
    aria-valuemin="-40" aria-valuemax="200"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuetransitiongoal="60"
    aria-valuemax="120"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuetransitiongoal="80"
    aria-valuemin="30" ></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-danger" role="progressbar" 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" role="progressbar" aria-valuetransitiongoal="20"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-info six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="40"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-success six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="60"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-warning six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="80"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-danger six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="100"></div>
    </div>
                        

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

centered text (nonpercentage)

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

basic progressbar 

<div class="progress">
    <div class="progress-bar" role="progressbar" 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" role="progressbar" aria-valuetransitiongoal="40"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuetransitiongoal="60"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuetransitiongoal="80"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-danger" role="progressbar" 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" role="progressbar" aria-valuetransitiongoal="20"></div>
    </div>
    <div class="progress progress-striped">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuetransitiongoal="40"></div>
    </div>
    <div class="progress progress-striped">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuetransitiongoal="60"></div>
    </div>
    <div class="progress progress-striped">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuetransitiongoal="80"></div>
    </div>
    <div class="progress progress-striped">
    <div class="progress-bar progress-bar-danger" role="progressbar" 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" role="progressbar" aria-valuetransitiongoal="20"></div>
    </div>
    <div class="progress progress-striped active">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuetransitiongoal="40"></div>
    </div>
    <div class="progress progress-striped active">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuetransitiongoal="60"></div>
    </div>
    <div class="progress progress-striped active">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuetransitiongoal="80"></div>
    </div>
    <div class="progress progress-striped active">
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuetransitiongoal="100"></div>
    </div>
                        

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

custom aria range 

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuetransitiongoal="2"
    aria-valuemin="1" aria-valuemax="6"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuetransitiongoal="40"
    aria-valuemin="-40" aria-valuemax="200"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuetransitiongoal="60"
    aria-valuemax="120"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuetransitiongoal="80"
    aria-valuemin="30" ></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-danger" role="progressbar" 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" role="progressbar" aria-valuetransitiongoal="20"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-info six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="40"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-success six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="60"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-warning six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="80"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-danger six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="100"></div>
    </div>
                        

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

default settings

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" role="progressbar" aria-valuetransitiongoal="75"></div>
    </div>
                        

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

themed progressbars 

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

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

striped progressbars 

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

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

animated progressbars 

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

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

custom aria range 

<div class="progress vertical">
    <div class="progress-bar" role="progressbar" aria-valuetransitiongoal="2"
    aria-valuemin="1" aria-valuemax="6"></div>
    </div>
    <div class="progress vertical">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuetransitiongoal="40"
    aria-valuemin="-40" aria-valuemax="200"></div>
    </div>
    <div class="progress vertical">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuetransitiongoal="60"
    aria-valuemax="120"></div>
    </div>
    <div class="progress vertical">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuetransitiongoal="80"
    aria-valuemin="30" ></div>
    </div>
    <div class="progress vertical">
    <div class="progress-bar progress-bar-danger" role="progressbar" 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" role="progressbar" aria-valuetransitiongoal="20"></div>
    </div>
    <div class="progress vertical">
    <div class="progress-bar progress-bar-info six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="40"></div>
    </div>
    <div class="progress vertical">
    <div class="progress-bar progress-bar-success six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="60"></div>
    </div>
    <div class="progress vertical">
    <div class="progress-bar progress-bar-warning six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="80"></div>
    </div>
    <div class="progress vertical">
    <div class="progress-bar progress-bar-danger six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="100"></div>
    </div>
                        

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

default settings (bottom)

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" role="progressbar" aria-valuetransitiongoal="75"></div>
    </div>
                        

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

themed progressbars 

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

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

striped progressbars 

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

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

animated progressbars 

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

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

custom aria range 

<div class="progress vertical bottom">
    <div class="progress-bar" role="progressbar" aria-valuetransitiongoal="2"
    aria-valuemin="1" aria-valuemax="6"></div>
    </div>
    <div class="progress vertical bottom">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuetransitiongoal="40"
    aria-valuemin="-40" aria-valuemax="200"></div>
    </div>
    <div class="progress vertical bottom">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuetransitiongoal="60"
    aria-valuemax="120"></div>
    </div>
    <div class="progress vertical bottom">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuetransitiongoal="80"
    aria-valuemin="30" ></div>
    </div>
    <div class="progress vertical bottom">
    <div class="progress-bar progress-bar-danger" role="progressbar" 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" role="progressbar" aria-valuetransitiongoal="20"></div>
    </div>
    <div class="progress vertical bottom">
    <div class="progress-bar progress-bar-info six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="40"></div>
    </div>
    <div class="progress vertical bottom">
    <div class="progress-bar progress-bar-success six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="60"></div>
    </div>
    <div class="progress vertical bottom">
    <div class="progress-bar progress-bar-warning six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="80"></div>
    </div>
    <div class="progress vertical bottom">
    <div class="progress-bar progress-bar-danger six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="100"></div>
    </div>
                        

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

filled text

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

basic progressbar 

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

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

themed progressbars 

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

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

striped progressbars 

<div class="progress progress-striped vertical">
    <div class="progress-bar" role="progressbar" aria-valuetransitiongoal="20"></div>
    </div>
    <div class="progress progress-striped vertical">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuetransitiongoal="40"></div>
    </div>
    <div class="progress progress-striped vertical">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuetransitiongoal="60"></div>
    </div>
    <div class="progress progress-striped vertical">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuetransitiongoal="80"></div>
    </div>
    <div class="progress progress-striped vertical">
    <div class="progress-bar progress-bar-danger" role="progressbar" 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" role="progressbar" aria-valuetransitiongoal="20"></div>
    </div>
    <div class="progress progress-striped vertical wide active">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuetransitiongoal="40"></div>
    </div>
    <div class="progress progress-striped vertical wide active">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuetransitiongoal="60"></div>
    </div>
    <div class="progress progress-striped vertical wide active">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuetransitiongoal="80"></div>
    </div>
    <div class="progress progress-striped vertical wide active">
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuetransitiongoal="100"></div>
    </div>
                        

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

custom aria range 

<div class="progress vertical">
    <div class="progress-bar" role="progressbar" aria-valuetransitiongoal="2"
    aria-valuemin="1" aria-valuemax="6"></div>
    </div>
    <div class="progress vertical">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuetransitiongoal="40"
    aria-valuemin="-40" aria-valuemax="200"></div>
    </div>
    <div class="progress vertical">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuetransitiongoal="60"
    aria-valuemax="120"></div>
    </div>
    <div class="progress vertical">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuetransitiongoal="80"
    aria-valuemin="30" ></div>
    </div>
    <div class="progress vertical">
    <div class="progress-bar progress-bar-danger" role="progressbar" 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" role="progressbar" aria-valuetransitiongoal="20"></div>
    </div>
    <div class="progress vertical">
    <div class="progress-bar progress-bar-info six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="40"></div>
    </div>
    <div class="progress vertical">
    <div class="progress-bar progress-bar-success six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="60"></div>
    </div>
    <div class="progress vertical">
    <div class="progress-bar progress-bar-warning six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="80"></div>
    </div>
    <div class="progress vertical">
    <div class="progress-bar progress-bar-danger six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="100"></div>
    </div>
                        

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

filled text (nonpercentage)

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

basic progressbar 

<div class="progress vertical">
    <div class="progress-bar" role="progressbar" 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" role="progressbar" aria-valuetransitiongoal="40"></div>
    </div>
    <div class="progress vertical">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuetransitiongoal="60"></div>
    </div>
    <div class="progress vertical">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuetransitiongoal="80"></div>
    </div>
    <div class="progress vertical">
    <div class="progress-bar progress-bar-danger" role="progressbar" 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" role="progressbar" aria-valuetransitiongoal="20"></div>
    </div>
    <div class="progress progress-striped vertical">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuetransitiongoal="40"></div>
    </div>
    <div class="progress progress-striped vertical">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuetransitiongoal="60"></div>
    </div>
    <div class="progress progress-striped vertical">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuetransitiongoal="80"></div>
    </div>
    <div class="progress progress-striped vertical">
    <div class="progress-bar progress-bar-danger" role="progressbar" 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" role="progressbar" aria-valuetransitiongoal="20"></div>
    </div>
    <div class="progress progress-striped vertical wide active">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuetransitiongoal="40"></div>
    </div>
    <div class="progress progress-striped vertical wide active">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuetransitiongoal="60"></div>
    </div>
    <div class="progress progress-striped vertical wide active">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuetransitiongoal="80"></div>
    </div>
    <div class="progress progress-striped vertical wide active">
    <div class="progress-bar progress-bar-danger" role="progressbar" 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" role="progressbar" aria-valuetransitiongoal="2"
    aria-valuemin="1" aria-valuemax="6"></div>
    </div>
    <div class="progress vertical">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuetransitiongoal="40"
    aria-valuemin="-40" aria-valuemax="200"></div>
    </div>
    <div class="progress vertical">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuetransitiongoal="60"
    aria-valuemax="120"></div>
    </div>
    <div class="progress vertical">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuetransitiongoal="80"
    aria-valuemin="30" ></div>
    </div>
    <div class="progress vertical">
    <div class="progress-bar progress-bar-danger" role="progressbar" 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" role="progressbar" aria-valuetransitiongoal="20"></div>
    </div>
    <div class="progress vertical">
    <div class="progress-bar progress-bar-info six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="40"></div>
    </div>
    <div class="progress vertical">
    <div class="progress-bar progress-bar-success six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="60"></div>
    </div>
    <div class="progress vertical">
    <div class="progress-bar progress-bar-warning six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="80"></div>
    </div>
    <div class="progress vertical">
    <div class="progress-bar progress-bar-danger six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="100"></div>
    </div>
                        

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

centered text

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

basic progressbar 

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

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

themed progressbars 

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

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

striped progressbars 

<div class="progress progress-striped vertical">
    <div class="progress-bar" role="progressbar" aria-valuetransitiongoal="20"></div>
    </div>
    <div class="progress progress-striped vertical">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuetransitiongoal="40"></div>
    </div>
    <div class="progress progress-striped vertical">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuetransitiongoal="60"></div>
    </div>
    <div class="progress progress-striped vertical">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuetransitiongoal="80"></div>
    </div>
    <div class="progress progress-striped vertical">
    <div class="progress-bar progress-bar-danger" role="progressbar" 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" role="progressbar" aria-valuetransitiongoal="20"></div>
    </div>
    <div class="progress progress-striped vertical wide active">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuetransitiongoal="40"></div>
    </div>
    <div class="progress progress-striped vertical wide active">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuetransitiongoal="60"></div>
    </div>
    <div class="progress progress-striped vertical wide active">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuetransitiongoal="80"></div>
    </div>
    <div class="progress progress-striped vertical wide active">
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuetransitiongoal="100"></div>
    </div>
                        

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

custom aria range 

<div class="progress vertical">
    <div class="progress-bar" role="progressbar" aria-valuetransitiongoal="2"
    aria-valuemin="1" aria-valuemax="6"></div>
    </div>
    <div class="progress vertical">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuetransitiongoal="40"
    aria-valuemin="-40" aria-valuemax="200"></div>
    </div>
    <div class="progress vertical">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuetransitiongoal="60"
    aria-valuemax="120"></div>
    </div>
    <div class="progress vertical">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuetransitiongoal="80"
    aria-valuemin="30" ></div>
    </div>
    <div class="progress vertical">
    <div class="progress-bar progress-bar-danger" role="progressbar" 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" role="progressbar" aria-valuetransitiongoal="20"></div>
    </div>
    <div class="progress vertical">
    <div class="progress-bar progress-bar-info six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="40"></div>
    </div>
    <div class="progress vertical">
    <div class="progress-bar progress-bar-success six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="60"></div>
    </div>
    <div class="progress vertical">
    <div class="progress-bar progress-bar-warning six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="80"></div>
    </div>
    <div class="progress vertical">
    <div class="progress-bar progress-bar-danger six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="100"></div>
    </div>
                        

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

centered text (nonpercentage)

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

basic progressbar 

<div class="progress vertical">
    <div class="progress-bar" role="progressbar" 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" role="progressbar" aria-valuetransitiongoal="40"></div>
    </div>
    <div class="progress vertical">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuetransitiongoal="60"></div>
    </div>
    <div class="progress vertical">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuetransitiongoal="80"></div>
    </div>
    <div class="progress vertical">
    <div class="progress-bar progress-bar-danger" role="progressbar" 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" role="progressbar" aria-valuetransitiongoal="20"></div>
    </div>
    <div class="progress progress-striped vertical">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuetransitiongoal="40"></div>
    </div>
    <div class="progress progress-striped vertical">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuetransitiongoal="60"></div>
    </div>
    <div class="progress progress-striped vertical">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuetransitiongoal="80"></div>
    </div>
    <div class="progress progress-striped vertical">
    <div class="progress-bar progress-bar-danger" role="progressbar" 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" role="progressbar" aria-valuetransitiongoal="20"></div>
    </div>
    <div class="progress progress-striped vertical wide active">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuetransitiongoal="40"></div>
    </div>
    <div class="progress progress-striped vertical wide active">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuetransitiongoal="60"></div>
    </div>
    <div class="progress progress-striped vertical wide active">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuetransitiongoal="80"></div>
    </div>
    <div class="progress progress-striped vertical wide active">
    <div class="progress-bar progress-bar-danger" role="progressbar" 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" role="progressbar" aria-valuetransitiongoal="2"
    aria-valuemin="1" aria-valuemax="6"></div>
    </div>
    <div class="progress vertical">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuetransitiongoal="40"
    aria-valuemin="-40" aria-valuemax="200"></div>
    </div>
    <div class="progress vertical">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuetransitiongoal="60"
    aria-valuemax="120"></div>
    </div>
    <div class="progress vertical">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuetransitiongoal="80"
    aria-valuemin="30" ></div>
    </div>
    <div class="progress vertical">
    <div class="progress-bar progress-bar-danger" role="progressbar" 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" role="progressbar" aria-valuetransitiongoal="20"></div>
    </div>
    <div class="progress vertical">
    <div class="progress-bar progress-bar-info six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="40"></div>
    </div>
    <div class="progress vertical">
    <div class="progress-bar progress-bar-success six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="60"></div>
    </div>
    <div class="progress vertical">
    <div class="progress-bar progress-bar-warning six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="80"></div>
    </div>
    <div class="progress vertical">
    <div class="progress-bar progress-bar-danger six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="100"></div>
    </div>
                        

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

miscellaneous

all other functionality and settings

delayed progressbars 

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuetransitiongoal="20"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuetransitiongoal="40"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuetransitiongoal="60"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuetransitiongoal="80"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-danger" role="progressbar" 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" role="progressbar" aria-valuetransitiongoal="20"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-info six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="40"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-success six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="60"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-warning six-sec-ease-in-out" role="progressbar"
    aria-valuetransitiongoal="80"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-danger six-sec-ease-in-out" role="progressbar"
    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" role="progressbar" 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" role="progressbar"></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" role="progressbar" aria-valuetransitiongoal="20"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuetransitiongoal="40"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuetransitiongoal="60"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuetransitiongoal="80"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-danger" role="progressbar" 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" role="progressbar" aria-valuetransitiongoal="20"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuetransitiongoal="40"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuetransitiongoal="60"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuetransitiongoal="80"></div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-danger" role="progressbar" 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();
    });