Использование индикатора выполнения углового материала для загрузки страницы

Question

У меня есть проект Angular, в котором я широко использую библиотеку Angular Material . Я хотел бы использовать Progress Bar Component , чтобы показать, когда страница загружается или когда я делаю вызов API. Например, пока я жду ответа от Stripe.

Запуск индикатора выполнения кажется простым, просто используйте глобальную переменную в сервисе, чтобы сигнализировать, когда страница загружается. Я думаю об использовании роутера для этого.

Однако я хотел бы показать фактический прогресс загрузки страницы. Примером может быть, когда вы идете на YouTube видео. Компонент api использует свойство value для отображения количества прогресса. Но как получить прогресс загрузки страницы?

Я знаю, что есть другие библиотеки, такие как ngx, которые используют это, но я хотел бы использовать библиотеку Angular Material, если это возможно.

Есть идеи, как этого добиться?

Answer 1

если вы видите их пример, они дали решение здесь

export class ProgressBarConfigurableExample {
  color = 'primary';
  mode = 'determinate';
  value = 100; // this value from 0 to 100 changes progess bar
  bufferValue = 100;
}