ProgressBarComponent

Represents the Kendo UI ProgressBar component for Angular.

Copy Code@Component({
   selector: 'my-app',
   template: `
       <kendo-progressbar [value]="value">
       </kendo-progressbar>
   `
})
class AppComponent {
    public value = 50;
}

Selector

kendo-progressbar

Export Name

Accessible in templates as #kendoProgressBarInstance="kendoProgressBar"

Inputs

animation

The animation configuration of the ProgressBar. Defaults to false.

disabled

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

emptyCssClass

The CSS classes that will be rendered on the inner element which represents the empty portion of the progress bar (see example). Supports the type of values that are supported by ngClass.

emptyCssStyle

The CSS styles that will be rendered on the inner element which represents the empty portion of the progress bar (see example). Supports the type of values that are supported by ngStyle.

indeterminate

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

label

Determines whether the status label will be visible. Defaults to true—the label will be visible and displayed with the default LabelSettings having its position set to end and its format set to value.

max

The maximum value of the ProgressBar. Defaults to 100.

min

The minimum value of the ProgressBar. Defaults to 0.

orientation

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

progressCssClass

The CSS classes that will be rendered on the inner element which represents the full portion of the progress bar (see example). Supports the type of values that are supported by ngClass.

progressCssStyle

The CSS styles that will be rendered on the inner element which represents the full portion of the progress bar (see example). Supports the type of values that are supported by ngStyle.

reverse

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

value

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

Events

animationEnd

Fires when the animation which indicates the latest value change is completed.