Direction

To reverse the ChunkProgressBar direction, use the reverse option.

By default, reverse is set to false.

import { Component } from '@angular/core';
import { ProgressBarOrientation } from '@progress/kendo-angular-progressbar';

@Component({
    selector: 'my-app',
    template: `
        <div class="wrapper">
          <div class="wrapper">
            <span>State: {{reverse ? 'Reversed' : 'Default'}}</span>
            <input type="checkbox" class="k-checkbox" id="reverse" [(ngModel)]="reverse" />
            <label class="k-checkbox-label" [attr.for]="'reverse'">Toggle the reverse state</label>
          </div>
            <span>Orientation: </span>
            <input type="radio" [(ngModel)]="orientation" value="horizontal" name="orientation" id="orientation-horizontal" class="k-radio">
            <label class="k-radio-label" [attr.for]="'orientation-horizontal'">Horizontal</label>
            <input type="radio" [(ngModel)]="orientation" value="vertical" name="orientation" id="orientation-vertical" class="k-radio">
            <label class="k-radio-label" [attr.for]="'orientation-vertical'">Vertical</label>
        </div>

            <kendo-chunkprogressbar
              [reverse]="reverse"
              [orientation]="orientation"
              [value]="value"
              ></kendo-chunkprogressbar>
    `,
    styles: [`
      .wrapper {
        padding-bottom: 20px;
      }
    `]
})
class AppComponent {
    public reverse = true;
    public orientation: ProgressBarOrientation = 'horizontal';
    public value = 20;
}

In this article