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="wrapper">
        <kendo-progressbar [value]="value"></kendo-progressbar>
      </div>
      <button class="k-button k-primary" (click)="startProgress()">Start</button>
      <button class="k-button" (click)="stopProgress()">Stop</button>
      <button class="k-button" (click)="resetProgress()">Reset</button>
    `,
    styles: [`
      .wrapper {
        padding-bottom: 20px;
      }
    `]
})

class AppComponent {
  public value: number = 0;
  private interval;

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

  public stopProgress() {
    if (this.interval) {
      clearInterval(this.interval);
    }
  }

  public resetProgress() {
    this.value = 0;
    if (this.interval) {
      clearInterval(this.interval);
      this.interval = undefined;
    }
  }
}

Functionality and Features

In this article