CircularProgressBarComponent

Represents the Kendo UI Circular ProgressBar component for Angular.

typescript

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

@Component({
  selector: 'my-app',
  template: `
    <kendo-circularprogressbar
      [value]="currentValue"
      [max]="100"
      [animation]="true">
    </kendo-circularprogressbar>
  `
})
export class AppComponent {
  public currentValue: number = 65;
}

Selector

kendo-circularprogressbar

Export Name

Accessible in templates as #kendoCircularProgressBarInstance="kendoCircularProgressBar"

Inputs

Name	Type	Default	Description
animation	boolean	false	Specifies whether to play an animation when the value changes.
indeterminate	boolean	false	Puts the Circular ProgressBar in indeterminate state.
max	number	100	Sets the maximum value which the Circular ProgressBar can accept.
min	number	0	Sets the minimum value which the Circular ProgressBar can accept.
opacity	number	1	Sets the opacity of the value arc.
progressColor	string | ProgressColor[]		Configures the pointer color. You can set it to a single color string or customize it per progress stages.
value	number	0	Sets the default value of the Circular ProgressBar between min and max.

Events

Name	Type	Description
animationEnd	EventEmitter<AnimationEndEvent>	Fires when the animation that indicates the latest value change completes.