Data-binding options:

• animationDelay
• animationOptions
• disabled
• fillDirection
• indicatorImage
• indicatorIncrement
• labelAlign
• labelFormatString
• maxValue
• minValue
• orientation
• toolTipFormatString
• value

Example:

In this example, the ViewModel is defined specifically for use with the progress bar. It has disabled, fillDirection, labelAlign, maxValue, and value properties that are bound in the View. If any of these values change, then the widgets will automatically respond to them. The widgets also update the ViewModel values as they modify them. This progress bar fills vertically to a value of 40 out of a possible 80 maximum. The label appears at the bottom of the progress bar.

Create a ViewModel:

var viewModel = function () {  
  var self = this;  
     self.percent = ko.observable(0);     
     self.val = ko.observable(0);
     self.min = ko.observable(0);
     self.max = ko.observable(100);
     self.disabled = ko.observable(false);
     self.labelAlign = ko.observable('center'); 
     self.fillDirection = ko.observable('east');
     self.lfs = ko.observable('{1}%');
     self.tfs = ko.observable('{1}%');
     self.increment = ko.observable(1);
     self.img = ko.observable('');
     self.delay = ko.observable(0);
     self.aniDisabled = ko.observable(false);
     self.easing = ko.observable(null);
     self.duration = ko.numericObservable(500);
};

Create View with Bound Controls:

<div data-bind="wijprogressbar: {
    value: val, 
    minValue: min, 
    maxValue: max, 
    disabled: disabled, 
    labelAlign: labelAlign, 
    fillDirection: fillDirection, 
    labelFormatString: lfs, 
    toolTipFormatString: tfs, 
    indicatorIncrement: increment, 
    indicatorImage: img, 
    animationDelay: delay, 
    animationOptions: {
        disabled: aniDisabled, 
        easing: easing, 
        duration: duration}
}">  
</div>