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.

Demo

Usage

To get started with the Circular Progress Indicator component, first you need to import the IgxProgressBarModule in the app.module.ts file:

Gradient Progress

One way to customize the progress bar is to use a color gradient instead of a solid color.
This can be done in one of two ways - by using the IgxProgressBarGradientDirective directive or by implementing a custom theme, albeit custom themes support up to two color stops.

If you want to create a gradient with just two color stops, you can do so by using a custom theme. Create a list of colors and pass it to the $progress-circle-color theme parameter: