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.
Angular Circular Progress Example
Usage
To get started with the Circular Progress Indicator component, first you need to import the IgxProgressBarModule in the app.module.ts file:
// app.module.ts
...
import { IgxProgressBarModule } from 'igniteui-angular';
// import { IgxProgressBarModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxProgressBarModule],
...
})
export class AppModule {}
To have a better understanding how everything works, let's create a simple example, like the one in the demo:
<igx-circular-bar
[value]="100"
[animate]="true"
class="custom-size"
></igx-circular-bar>
After that, we should have the demo sample in your browser.
Note
The igx-circular-bar emits onProgressChanged
event that outputs an object like this {currentValue: 65, previousValue: 64}
on each step.
Note
The default progress increments by 1% of the max
value per update cycle, this happens if the step
value is not defined. To change the update rate, the step
value should be defined.```
Indeterminate Progress
If you want to track a process that is not determined precisely, you can set the indeterminate
input property to true
.
<igx-circular-bar
[animate]="false"
[indeterminate]="true"
[textVisibility]="false"
></igx-circular-bar>
Note
You can hide the text of the circular progress bar by setting the textVisibility
property to false
.
The final result should be:
Dynamic Progress
You can dynamically change the value of the progress by using external controls like buttons. To achieve this, we can bind the value to a class property:
<div class="sample-content">
<igx-circular-bar
[value]="currentValue"
[max]="100"
[animate]="true"
class="custom-size">
</igx-circular-bar>
<div class="button-container">
<button igxButton="icon" (click)="decrementProgress()">
<igx-icon fontSet="material">remove</igx-icon>
</button>
<button igxButton="icon" (click)="incrementProgress()">
<igx-icon fontSet="material">add</igx-icon>
</button>
</div>
</div>
Add the methods that increment and decrement the value:
public currentValue: number;
public ngOnInit() {
this.currentValue = 0;
}
public incrementProgress() {
this.currentValue += 10;
if (this.currentValue > 100) {
this.currentValue = 100;
}
}
public decrementProgress() {
this.currentValue -= 10;
if (this.currentValue < 0) {
this.currentValue = 0;
}
}
Add some styles:
.custom-size {
width: 100px;
height: 100px;
}
.sample-content {
width: 300px;
display: flex;
align-items: center;
margin-top: 30px;
}
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:
$colors: #695cf9, #ef017c;
$custom-theme: progress-circular-theme(
$progress-circle-color: $colors
);
You can learn more about styling the circular progress bar in the Styling Section
To provide a gradient that has more than 2 color stops, we have to use the directive on an ng-template
in our igx-circular-bar
like that:
<div class="sample-content">
<igx-circular-bar
[value]="currentValue"
[max]="100"
[animate]="true"
class="custom-size">
<ng-template igxProgressBarGradient let-id>
<svg:linearGradient [id]="id" gradientTransform="rotate(90)">
<stop offset="0%" stop-color="#ff9a40"/>
<stop offset="50%" stop-color="#1eccd4"/>
<stop offset="100%" stop-color="#ff0079"/>
</svg:linearGradient>
</ng-template>
</igx-circular-bar>
<div class="button-container">
<button igxButton="icon" (click)="removeProgress()">
<igx-icon fontSet="material">remove</igx-icon>
</button>
<button igxButton="icon" (click)="addProgress()">
<igx-icon fontSet="material">add</igx-icon>
</button>
</div>
</div>
After reproducing the steps above, you should get this as a result:
Styling
To get started with styling the circular progress bar, we need to import the index
file, where all the theme functions and component mixins live:
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
Following the simplest approach, we create a new theme that extends the progress-circular-theme
and accepts the $base-circle-color
and the $progress-circle-color
parameters.
$custom-theme: progress-circular-theme(
$base-circle-color: lightgray,
$progress-circle-color: rgb(32, 192, 17)
);
Including Themes
The last step is to include the component theme in our application.
If $legacy-support
is set to true
, include the component theme like that:
@include progress-circular($custom-theme);
Note
If the component is using an Emulated
ViewEncapsulation, it is necessary to penetrate
this encapsulation using ::ng-deep
:host {
::ng-deep {
@include progress-circular($custom-theme);
}
}
If $legacy-support
is set to false
(default), include the component css variables like that:
@include css-vars($custom-theme);
Note
If the component is using an Emulated
ViewEncapsulation, you still have to use :host
because you need a global selector in order to override the variables.
:host {
@include css-vars($custom-theme);
}