Angular UI Development with PrimeNG

Process status indicator in action

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