Как реализовать простой индикатор выполнения в Angular 8?

Я хотел бы реализовать индикатор выполнения, который постепенно увеличивается по мере увеличения переменной.

Я пробовал 3 способа, ни один из них не работает, как я написал.

• Использование CSS

.base{
    height: 10px;
    width: 100%;
    background: #ddd;
}

.pBar{
    height: 10px;
    background: #009200;
}

а в component.html:

<div class = "base">
    <div class = "pBar" [ngStyle] = "{'width.%':value}"></div>
</div>

где «значение» — это числовое значение, объявленное в component.ts и инициализированное значением 10 в ngOnInit().

Результат: индикатор выполнения на 100%, если я изменяю «значение», результат остается неизменным

• Использование библиотеки Материал v13.3.6

импорт библиотеки и вставка ее в импорт module.ts а затем вставить его в component.html:

<mat-progress-bar mode = "determinate" value = "40" color = "warn"></mat-progress-bar>

Результат: черная полоса, которая начинается от середины экрана и доходит до правого конца; меняя значение даже вручную ничего не меняется.

• Использование библиотеки Начальная загрузка v4

Я импортировал библиотеку из терминала и использовал ее в компоненте html:

<div class = "progress">
  <div class = "progress-bar" role = "progressbar" style = "width: 25%" aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100"></div>
</div>

вставив ниже js-скрипт с setInterval для постепенного изменения значения aria-valuenow и ширины:

Результат: фиксированная полоса на 100%, но вручную изменив значение ширины, полоса, конечно, изменила размер

Я сделал что-то не так? Как я могу достичь своей цели? Спасибо

Решение:

Спасибо Себастьяну Сервузу за то, что указал мне путь.

Это индикатор выполнения, который я хотел сделать (с использованием начальной загрузки 4)

В компоненте.html:

<div class = "progress">
      <div class = "progress-bar progress-bar-striped progress-bar-animated bg-danger" role = "progressbar" [ngStyle] = "{'width.%': progress * 100}" [attr.aria-valuenow] = "progress" aria-valuemin = "0" aria-valuemax = "100"></div>
    </div>

В компоненте .ts:

import { timer } from 'rxjs';

progress!:number;
ngOnInit(): void {
this.progress = 0;
this.start(); }

start(){
    timer(0, 50).subscribe(()=>{
      while (this.progress < 1)
        this.progress+=0,01;
    });}

Надеюсь, я помог кому-то еще.