import {ProgressBar} 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. |
PrimeUI progressbar widget css.
<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 ProgressBarDemoComponent { 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); } }