Binding to Bootatrap progress bar

Examples

Progress value

Text

Appearance

Striped

Animated

Text hidden

Progress bar type

Html markup

<div data-bind="progress: { value: value, type: type, text: text, textHidden: textHidden, animated: animated, striped: striped }"></div>

View model

function ProgressExampleViewModel() {
    this.value = ko.observable(50);

    this.animated = ko.observable();

    this.striped = ko.observable();

    this.type = ko.observable('info');

    this.text = ko.observable('Complete');

    this.textHidden = ko.observable(true);
}

Also it is possible to use only number as model for progress binding:

Progress value

Html markup

<div data-bind="progress: progress"></div>

View model

function ProgressExampleViewModel() {
    //...

    this.progress = ko.observable(20);
}

Options

All of the options can be observables.

data-bind="progress: { value: value, type: type, text: text, textHidden: hidden, animated: animated, striped: striped }"

value

Type: number, can be observable

Progress value in percents. Values greater than 100, assumed equal to 100
type

Type: string, can be observable (default: none)

Type of progress bar. Possible values are 'info', 'warning', 'danger', 'success'. To specify your own type you should define css-styles for it. For exmaple, for type 'my-custom-type', you shoud provide css class 'progress-bar-custom-type'.
text

Type: string, can be observable (default: empty string)

Text on progress bar after percents
textHidden

Type: boolean, can be observable (default: true)

Hides percents of progress and text on progress bar, if true, otherwise hides.
striped

Type: boolean, can be observable (default: false)

Adds stripes to progress bar, if true. Work only in Bootstrap >= 3.2.0
animated

Type: boolean, can be observable (default: false)

Animates stripes on progress bar, if true. Work only in Bootstrap >= 3.2.0

Short notation

If you only need use progress value, you can use short notation of binding, which uses only number as model.

data-bind="progress: progressValue"

progressValue

Type: number, can be observable

Progress value in percents. Values greater than 100, assumed equal to 100

Default values

Default values for progress binding located in ko.bindingHandlers.progress.defaults object. It contains default css for root element of progress-bar and default values for its options. Can be changed before ko.applyBindigs() is called.

defaults: {
    css: 'progress',
    text: '',
    textHidden: true,
    striped: false,
    type: '',
    animated: false
}