bootstrap-progressbar.js 0.7.0 for bootstrap 2.3.2

# bootstrap-progressbar - v0.7.0

examples running with jQuery v1.8.3 and bootstrap v2.3.2

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

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

### themed progressbars

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

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

### striped progressbars

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

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

### animated progressbars

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

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

### custom aria range

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

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

### custom animations

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

    $('.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="bar" role="progressbar" aria-valuetransitiongoal="75"></div>
    </div>

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

### themed progressbars

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

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

### striped progressbars

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

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

### animated progressbars

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

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

### custom aria range

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

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

### custom animations

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

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

# filled text

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

### basic progressbar

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

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

### themed progressbars

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

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

### striped progressbars

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

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

### animated progressbars

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

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

### custom aria range

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

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

### custom animations

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

    $('.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="bar" role="progressbar" aria-valuetransitiongoal="75"></div>
    </div>

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

### themed progressbars

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

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

### striped progressbars

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

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

### animated progressbars

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

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

### custom aria range

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

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

### custom animations

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

    $('.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="bar" role="progressbar" aria-valuetransitiongoal="75"></div>
    </div>

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

### themed progressbars

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

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

### striped progressbars

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

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

### animated progressbars

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

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

### custom aria range

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

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

### custom animations

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

    $('.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="bar" role="progressbar" aria-valuetransitiongoal="75"></div>
    </div>

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

### themed progressbars

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

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

### striped progressbars

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

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

### animated progressbars

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

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

### custom aria range

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

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

### custom animations

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

    $('.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="bar" role="progressbar" aria-valuetransitiongoal="75"></div>
    </div>

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

### themed progressbars

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

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

### striped progressbars

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

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

### animated progressbars

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

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

### custom aria range

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

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

### custom animations

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

    $('.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="bar" role="progressbar" aria-valuetransitiongoal="75"></div>
    </div>

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

### themed progressbars

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

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

### striped progressbars

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

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

### animated progressbars

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

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

### custom aria range

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

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

### custom animations

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

    $('.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="bar" role="progressbar" aria-valuetransitiongoal="75"></div>
    </div>

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

### themed progressbars

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

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

### striped progressbars

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

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

### animated progressbars

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

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

### custom aria range

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

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

### custom animations

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

    $('.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="bar" role="progressbar" aria-valuetransitiongoal="75"></div>
    </div>

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

### themed progressbars

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

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

### striped progressbars

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

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

### animated progressbars

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

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

### custom aria range

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

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

### custom animations

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

    $('.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="bar" role="progressbar" aria-valuetransitiongoal="75"></div>
    </div>

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

### themed progressbars

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

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

### striped progressbars

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

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

### animated progressbars

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

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

### custom aria range

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

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

### custom animations

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

    $('.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="bar" role="progressbar" aria-valuetransitiongoal="75"></div>
    </div>

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

### themed progressbars

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

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

### striped progressbars

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

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

### animated progressbars

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

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

### custom aria range

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

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

### custom animations

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

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

# miscellaneous

all other functionality and settings

### delayed progressbars

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

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

### refresh speed progressbars

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

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

### callbacks

update:

done:

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

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

### custom amount format

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

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

### multi trigger

    <div class="progress">
        <div class="bar"></div>
    </div>
    <div class="progress">
        <div class="bar bar-info"></div>
    </div>
    <div class="progress">
        <div class="bar bar-success"></div>
    </div>
    <div class="progress">
        <div class="bar bar-warning"></div>
    </div>
    <div class="progress">
        <div class="bar 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();
    });