The ProgressBar component indicates a status of some process, task, or whatever. It can deal with static as well as dynamic values. A dynamic value is a value changing in time. The next code snippet demonstrates two progress bars, with a static and dynamic value:

<p-growl [value]="msgs"></p-growl>

<h3>Static value</h3>
<p-progressBar [value]="40"></p-progressBar>

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

The dynamic value gets produced every 800 milliseconds from 1 to 100 with the Observable methods as follows:

export class ProgressBarComponent implements OnInit, OnDestroy {
  msgs: Message[];
  value: number;
  interval$: Subscription;

  ngOnInit() {
    const interval = Observable.interval(800).take(100);
    this.interval$ = interval.subscribe(
      x => this.value = x + 1,
      () => {/** no error handling */ },
      () => this.msgs = [{severity: 'info', summary: 'Success', 
        detail: 'Process completed'}]
    );
  }

  ngOnDestroy() {
    this.interval$.unsubscribe();
  }
}

At the end, a growl message with the text Process completed will be displayed. A snapshot picture is shown here: