import {ProgressBarModule} from 'primeng/primeng';
ProgressBar requires a value between 0 and 100 to display the progress.
<p-progressBar [value]="value"></p-progressBar>
export class ModelComponent {
value: number = 0;
}
Name | Type | Default | Description |
---|---|---|---|
valye | number | null | Current value of the progress. |
Following is the list of structural style classes, for theming classes visit theming page.
Name | Element |
---|---|
ui-progressbar | Container element. |
ui-progressbar-value | Element whose width changes according to value. |
ui-progressbar-label | Label element that displays the current value. |
Native component that requires css of PrimeUI ProgressBar.
<p-growl [(value)]="msgs"></p-growl>
<h3 class="first">Dynamic</h3>
<p-progressBar [value]="value"></p-progressBar>
<h3>Static</h3>
<p-progressBar [value]="50"></p-progressBar>
export class ProgressBarDemo {
value: number = 0;
msgs: Message[];
ngOnInit() {
let interval = setInterval(() => {
this.value = this.value + Math.floor(Math.random() * 10) + 1;
if(this.value >= 100) {
this.value = 100;
this.msgs = [{severity: 'info', summary: 'Success', detail: 'Process Completed'}];
clearInterval(interval);
}
}, 2000);
}
}