title: Using Angular Material Progress Bar For Loading of Page
body: <p>I have an Angular project where I am extensively using the <a href="https://material.angular.io/" rel="nofollow noreferrer">Angular Material library</a>. I would like to use the <a href="https://material.angular.io/components/progress-bar/overview" rel="nofollow noreferrer">Progress Bar Component</a> to show when a page is loading or when I make an api call. For example, while I'm waiting for a response from Stripe. </p>
  
  <p>Starting the progress bar seems simple, just use a global variable in a service to signal when the page is loading. I'm thinking of using the router for that. </p>
  
  <p>However, I would like to show the actual progress of the page load. An example would be when you go to a youtube video. 
  The component api uses a value property to display the amount of progress. But how to get the progress of the page load? </p>
  
  <p>I know there are other libraries such as ngx that use this but I would like to use the Angular Material library if possible. </p>
  
  <p>Any ideas how to achieve this?</p>