ProgressBar ProgressBar is a process status indicator.

Dynamic

Static

Import


import {ProgressBarModule} from 'primeng/primeng';

Getting Started

ProgressBar requires a value between 0 and 100 to display the progress.


<p-progressBar [value]="value"></p-progressBar>


export class ModelComponent {

    value: number = 0;

}

Attributes

Name Type Default Description
valye number null Current value of the progress.

Styling

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.

Dependencies

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);
    }

}