Angular Circular Progress Component Overview
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
Getting Started with Ignite UI for Angular Circular Progress
To get started with the Ignite UI for Angular Circular Progress component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command:
ng add igniteui-angular
For a complete introduction to the Ignite UI for Angular, read the getting started topic.
The next step is 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 {}
Alternatively, as of 16.0.0
you can import the IgxCircularProgressBarComponent
as a standalone dependency, or use the IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES
token to import the component and all of its supporting components and directives.
// home.component.ts
import { IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES } from 'igniteui-angular';
// import { IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: `
<igx-circular-bar
[value]="100"
[animate]="true"
class="custom-size"
></igx-circular-bar>
`,
styleUrls: ['home.component.scss'],
standalone: true,
imports: [IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES]
/* or imports: [IgxCircularProgressBarComponent] */
})
export class HomeComponent {}
Now that you have the Ignite UI for Angular Progress Bar module or directives imported, you can start using the igx-circular-bar
component.
Using the Angular Circular Progress
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 igxIconButton="flat" (click)="decrementProgress()">
<igx-icon fontSet="material">remove</igx-icon>
</button>
<button igxIconButton="flat" (click)="incrementProgress()">
<igx-icon fontSet="material">add</igx-icon>
</button>
</div>
</div>
Add the methods that increment and decrement the value:
@Component({...})
export class HomeComponent {
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 igxIconButton="flat" (click)="removeProgress()">
<igx-icon fontSet="material">remove</igx-icon>
</button>
<button igxIconButton="flat" (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);
}