Circular Progress

The Ignite UI for Angular Circular Progress Indicator component provides a visual indicator of an application’s process as it changes. The circular indicator updates its appearance as its state changes.

Circular Progress Demo


<igx-circular-bar (onProgressChanged)="f($event)" [value]="currentValue">


Name Type Description
max number Set maximum value that can be passed. Default max value is 100.
value number Set value that indicates the completed bar position.
animate boolean animation on progress bar.


Name Description
getValue() Return passed value to progress bar to be in range between min(0) and max.
getPercentValue() Calculate the percentage based on passed value.
onProgressChanged Exposed event, which could be handled to track progress changing