Value and Ranges

The ProgressBar provides option for setting its value or a range of values and for indicating the progress of an ongoing task.

  • To set the value of the ProgressBar, use its value option.
  • To define the start and end values of the range, use the min and max ProgressBar settings respectively.
  • To indicate that a task is still in progress, use the indeterminate configuration.
@Component({
    selector: 'my-app',
    template: `
        <div class="wrapper">
          <input class="k-checkbox" type="checkbox" id="indeterminate" [(ngModel)]="indeterminate" />
          <label class="k-checkbox-label" [attr.for]="'indeterminate'">Toggle the indeterminate state</label>
        </div>
        <p>
            <label>
                Value: <input type="number" max="10" min="-10" [(ngModel)]="value" />
            </label>
        </p>
        <span>Min: {{min}}</span>
        <kendo-progressbar
            [min]="min"
            [max]="max"
            [indeterminate]="indeterminate"
            [value]="value"
            ></kendo-progressbar>
        <span>Max: {{max}}</span>
    `,
    styles: [`
      .wrapper {
        padding-bottom: 20px;
      }
    `]
})
class AppComponent {
    public value = 0;
    public indeterminate = false;
    public min = -10;
    public max = 10;
}

In this article