ProgressBar ProgressBar is a process status indicator.

Dynamic

Static

Indeterminate

Import


import {ProgressBarModule} from 'primeng/progressbar';

Getting Started

ProgressBar has two modes; "determinate" and "indeterminate". Former requires a value between 0 and 100 to display the progress.


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


export class ModelComponent {

    value: number = 0;

}

Indeterminate has no such a requirement and is simple enabled using mode property.


<p-progressBar mode="indeterminate"></p-progressBar>

Properties

Name	Type	Default	Description
value	number	null	Current value of the progress.
showValue	boolean	true	Show or hide progress bar value.
unit	string	%	Unit sign appended to the value.
mode	string	determinate	Defines the mode of the progress, valid values are "determinate" and "indeterminate".

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Name	Element
ui-progressbar	Container element.
ui-progressbar-determinate	Container element of a determinate progressbar.
ui-progressbar-indeterminate	Container element of an indeterminate progressbar.
ui-progressbar-value	Element whose width changes according to value.
ui-progressbar-label	Label element that displays the current value.

Dependencies

None.

View on GitHub


<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>

<h3>Indeterminate</h3>
<p-progressBar mode="indeterminate" [style]="{'height': '6px'}"></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);
    }

}