##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.
The animationDuration
input property is used to specify how long the animation cycle should take.
The following example specifies the animation duration set to 5 seconds.
<igx-circular-bar [striped]="false" [value]="100" [animationDuration]="5000"></igx-circular-bar>
Circular Progress Demo
Usage
Circular Progress Indicator can be used to show a user that he is in a process. To get started with the Ignite UI for Angular Circular Progress, we should first import import the IgxProgressBarModule in the app.module.ts file:
// app.module.ts
...
import { IgxProgressBarModule } from 'igniteui-angular';
@NgModule({
...
imports: [..., IgxProgressBarModule],
...
})
export class AppModule {}
And now to have a better understanding how everything works, let's create a simple example, in which we will simulate a real process progress, that is triggered on button click. In order to make our example better we will need to import some additional modules in the app.module.ts file.
// app.module.ts
import {
..., IgxButtonModule, IgxIconModule, IgxRippleModule
} from 'igniteui-angular';
@NgModule({
...
imports: [..., IgxButtonModule, IgxIconModule, IgxRippleModule],
})
export class AppModule {}
Notice that the igx-circular-bar emits onProgressChanged
event that outputs an object that gives us {currentValue: 65, previousValue: 64}
on each step.
<section class="sample-content">
<article class="sample-column">
<h5>Text is hidden</h5>
<div class="circular-container">
<igx-circular-bar [value]="currentValue" [max]="100" [animate]="true" [textVisibility]="false" (onProgressChanged)="progresChanged($event)"></igx-circular-bar>
</div>
</article>
<article class="sample-column">
<h5>Text is displayed</h5>
<div class="circular-container">
<igx-circular-bar [value]="currentValue" [max]="100" [animate]="true" [textVisibility]="true" (onProgressChanged)="progresChanged($event)"></igx-circular-bar>
</div>
</article>
</section>
<div class="button-container">
<p>Press the button to start updating the bar</p>
<button igxButton="fab" igxButtonBackground="#333" igxRipple="white" (click)="tick()">
<igx-icon fontSet="material">{{changeIcon()}}</igx-icon>
</button>
</div>
...
public currentValue: number;
public interval: any;
@ViewChild(IgxCircularProgressBarComponent) public circularBar: IgxCircularProgressBarComponent;
public ngOnInit() {
this.currentValue = 0;
}
public changeIcon() {
return this.interval ? "pause" : "play_arrow";
}
public tick() {
if (this.interval) {
this.interval = clearInterval(this.interval);
return;
}
this.interval = setInterval(this.updateValue.bind(this), 60);
}
public updateValue() {
this.circularBar.updateProgressSmoothly(this.currentValue += this.randomIntFromInterval(1, 3), 1);
if (this.circularBar.value > this.circularBar.max + 3) {
this.interval = clearInterval(this.interval);
}
}
public progresChanged(progress) { ... }
private randomIntFromInterval(min: number, max: number) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
And now if we set up everything correctly we should have the folllowing displayed in our browser:
Note
The default progress update is 1% of the max
value, this occurs when the step
value is not defined. For faster progress, the step
value should be defined greater than (max
* 1%), for slower, it should be less than the default progress update.
When providing a value for the
step
input, define this value greater than thevalue
input, otherwise there will be only one update, which gets the value that is passed for progress update.