Я пытаюсь создать страницу с Angular, которая имеет различные индикаторы выполнения, которые представляют прогресс, достигнутый для действия, которое занимает заданное количество времени. То, что я пытаюсь сделать, это использовать индикатор выполнения Angular Material, чтобы сделать плавную анимацию от времени 0 до времени окончания. Мое текущее решение - просто обновлять процент процесса каждые 50 мс и устанавливать значение индикатора выполнения на это значение. Я выполняю это с помощью таймера rxjs, как показано ниже:
const start = new Date().getTime();
const source = timer(0, 50);
const subscribe = source.subscribe(() => {
const time = new Date().getTime();
if (time - start > length) {
subscribe.unsubscribe();
}
this.progressValue = 100 * (time - start) / length;
});
Вот сам индикатор выполнения HTML:
<mat-progress-bar mode="determinant" [value]="progressValue"></mat-progress-bar>
Результатом, однако, является очень изменчивая прогрессия индикатора выполнения. Есть лучший способ сделать это? Я каждый раз знаю длительность процесса, поэтому считаю, что плавный переход в течение этого времени должен быть относительно легким. Спасибо!