Прогрессбар

PrimeNG/ProgressBar (opens in a new tab)

Progressbar - индикатор состояния процесса.

С чего начать

Подключите модуль

import { ProgressBarModule } from 'primeng/progressbar';

В .ts файле

import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-prime-progressbar',
  templateUrl: './prime-progressbar.component.html',
  styleUrls: ['./prime-progressbar.component.scss']
})
export class PrimeProgressbarComponent implements OnInit {
 
  value: number = 0;
 
  constructor(private cdr: ChangeDetectorRef) {}
 
  ngOnInit(): void {
    let interval = setInterval(() => {
      this.value = this.value + Math.floor(Math.random() * 10) + 1;
      if (this.value >= 100) {
        this.value = 100;
      }
      this.cdr.detectChanges();
    }, 2000);
 
    this.cdr.markForCheck()
  }
}

Встройте компонент с помощью тэга p-progressBar.

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

Dynamic

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

Static

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

Indeterminate

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

Стилизация

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

Panel ProgressSpinner