New to Kendo UI for Angular? Start a free 30-day trial

ProgressBarComponent

Component

Represents the Kendo UI ProgressBar component for Angular.

Definition

Package:@progress/kendo-angular-progressbar

Selector:kendo-progressbar

Export Name:Accessible in templates as #kendoProgressBarInstance="kendoProgressBar"

Syntax:

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

Inputs

animation

boolean | ProgressBarAnimation

The animation configuration of the ProgressBar.

Default:

false

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 }

The CSS classes that render on the inner element which represents the empty portion of the progress bar (see example). Supports the type of values that ngClass supports.

emptyCssStyle

{ [key: string]: string }

The CSS styles that render on the inner element which represents the empty portion of the progress bar (see example). Supports the type of values that ngStyle supports.

indeterminate

boolean

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

Default:

false

label

boolean | LabelSettings

Determines whether the status label displays.

Default:

true

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:

orientation

ProgressBarOrientation

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

Default:

'horizontal'

progressCssClass

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

The CSS classes that render on the inner element which represents the full portion of the progress bar (see example). Supports the type of values that ngClass supports.

progressCssStyle

{ [key: string]: string }

Sets 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 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:

Events

animationEnd

EventEmitter<AnimationEndEvent>

Fires when the animation which indicates the latest value change completes.