New to Kendo UI for AngularStart a free 30-day trial

Definition

Package:@progress/kendo-angular-progressbar

Selector:kendo-chunkprogressbar

Export Name:Accessible in templates as #kendoChunkProgressBarInstance="kendoChunkProgressBar"

Syntax:

TS
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <kendo-chunkprogressbar
      [value]="progressValue"
      [chunkCount]="8">
    </kendo-chunkprogressbar>
  `
})
export class AppComponent {
  public progressValue: number = 40;
}

Inputs

Sets the number of chunks into which the ChunkProgressBar will be split.

Default:

5

disabled

boolean

If set to true, the ProgressBar will be disabled (see example). It will still allow you to change its value. Defaults to false.

Default:

false

emptyCssClass

string | string[] | Set​<string> | { [key: string]: any }

Sets the CSS classes that will be rendered on the empty chunk elements (see example). Supports the type of values that ngClass supports.

emptyCssStyle

{ [key: string]: string }

Sets the CSS styles that will be rendered on the empty chunk elements (see example). Supports the type of values that ngStyle supports.

Sets the indeterminate state of the ProgressBar. Defaults to false.

Default:

false

max

number

The maximum value of the ProgressBar. Defaults to 100.

Default:

100

min

number

The minimum value of the ProgressBar. Defaults to 0.

Default:

0

Defines the orientation of the ProgressBar (see example). Defaults to horizontal.

Default:

'horizontal'

progressCssClass

string | string[] | Set​<string> | { [key: string]: string }

Sets the CSS classes that will be rendered on the full chunk elements (see example). Supports the type of values that ngClass supports.

progressCssStyle

{ [key: string]: any }

Sets the CSS styles that will be rendered on the full chunk elements (see example). Supports the type of values that ngStyle supports.

reverse

boolean

If set to true, the ProgressBar will be reversed (see example). Defaults to false.

Default:

false

value

number

The value of the ProgressBar. Has to be between min and max. Defaults to 0.

Default:

0