ProgressBar ProgressBar is a process status indicator.





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>


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


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.



View on GitHub

<p-toast [style]="{marginTop: '80px'}"></p-toast>

<h3 class="first">Dynamic</h3>
<p-progressBar [value]="value"></p-progressBar>

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

<p-progressBar mode="indeterminate" [style]="{'height': '6px'}"></p-progressBar>

export class ProgressBarDemo {

    value: number = 0;

    constructor(private messageService: MessageService) {}

    ngOnInit() {
        let interval = setInterval(() => {
            this.value = this.value + Math.floor(Math.random() * 10) + 1;
            if(this.value >= 100) {
                this.value = 100;
                this.messageService.add({severity: 'info', summary: 'Success', detail: 'Process Completed'});
        }, 2000);