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

CircularProgressBarComponent

Represents the Kendo UI Circular ProgressBar component for Angular.

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

Selector

kendo-circularprogressbar

Export Name

Accessible in templates as #kendoCircularProgressBarInstance="kendoCircularProgressBar"

Inputs

NameTypeDefaultDescription

animation

boolean

false

Indicates whether an animation will be played on value changes.

indeterminate

boolean

false

Puts the Circular ProgressBar in indeterminate state.

max

number

100

The maximum value which the Circular Progressbar can accept.

min

number

0

The minimum value which the Circular Progressbar can accept.

opacity

number

1

The opacity of the value arc.

progressColor

string | ProgressColor[]

Configures the pointer color. Could be set to a single color string or customized per progress stages.

value

number

0

Sets the default value of the Circular Progressbar between min and max.

Events

NameTypeDescription

animationEnd

EventEmitter<AnimationEndEvent>

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

In this article
SelectorExport NameInputsEvents
Not finding the help you need?
Contact Support