Getting Started with Kendo UI for Angular ProgressBar

The ProgressBar displays and tracks the progress of a task.

It supports multiple label formats, horizontal and vertical orientation, and also different directions.

Basic Usage

The following example demonstrates the ProgressBar in action.

@Component({
    selector: 'my-app',
    template: `
      <div class="example-config">
        <button class="k-button k-primary" [disabled]="running || value >= 100" (click)="startProgress()">{{ value ? 'Resume' : 'Start'}}</button>
        <button class="k-button" [disabled]="!running" (click)="stopProgress()">Stop</button>
        <button class="k-button" [disabled]="!value" (click)="resetProgress()">Reset</button>
      </div>
      <kendo-progressbar [value]="value"></kendo-progressbar>
    `
})
export class AppComponent {
  public value: number = 0;
  public running: number;

  public startProgress() {
    this.running = setInterval(() => {
      if (this.value <= 100) {
        this.value++;
      } else {
        this.stopProgress();
      }
    }, 50);
  }

  public stopProgress() {
    if (this.running) {
      clearInterval(this.running);
      this.running = null;
    }
  }

  public resetProgress() {
    this.value = 0;
    this.stopProgress();
  }
}

Functionality and Features

In this article