Getting Started with Kendo UI for Angular ChunkProgressBar

The ChunkProgressBar displays and tracks the progress of a task as a predefined number of chunks.

It supports horizontal and vertical orientation, and different directions.

Basic Usage

The following example demonstrates the ChunkProgressBar in action.

@Component({
    selector: 'my-app',
    template: `
      <div class="wrapper">
        <button [disabled]="value === 0" class="k-button k-primary" (click)="rewindProgress()">
          <span class="k-icon k-i-rewind"></span>
        </button>
        <kendo-chunkprogressbar [value]="value"></kendo-chunkprogressbar>
        <button [disabled]="value === 100" class="k-button" style="background: green; color: white;" (click)="forwardProgress()">
          <span class="k-icon k-i-forward"></span>
        </button>
      </div>
    `,
    styles: [`
      .wrapper {
        padding-bottom: 20px;
      }
    `]
})

class AppComponent {
  public value: number = 0;

  public forwardProgress() {
    if (this.value < 100) {
      this.value += 20;
    }
  }

  public rewindProgress() {
    if (this.value > 0) {
      this.value -= 20;
    }
  }
}

Functionality and Features

In this article