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
Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.
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
cmd
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 {}
typescript
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 {}
typescript
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>
html
After that, we should have the demo sample in your browser.
The igx-circular-bar emits onProgressChanged
event that outputs an object like this {currentValue: 65, previousValue: 64}
on each step.
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>
html
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>
html
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;
}
}
}
typescript
Add some styles:
.custom-size {
width: 100px;
height: 100px;
}
.sample-content {
width: 300px;
display: flex;
align-items: center;
margin-top: 30px;
}
scss
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,
);
scss
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>
html
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';
scss
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),
);
scss
The last step is to include the component theme in our application.
@include css-vars($custom-theme);
scss