Manage Loading with Angular Material Progress Bars and Spinners

Instructor: [00:00] To use Material loading tools in your application, you need to include the Material progress bar and Material spinner module in your NgModule imports.

[00:06] Let's start by looking at the Material progress bar component. The default setting for progress bars is determinate, meaning it will fill based on the input value between 1 and 100. For demo, this value will be based on our loading percent property in our component.

[00:20] To update this value in order to mimic a real-world scenario, I created a loading progress helper that accepts a speed of milliseconds, using the RxJS interval operator to emit a value each time this duration passes.

[00:32] I then multiply this by 10 to give us the value we need to supply to our progress bar component. We now have a Material-Design-themed progress bar that fills based on the provided value.

[00:42] Progress bars and progress spinners are themable, meaning we can provide a color input of primary, accent, or warn to correspond with the appropriate color of our theme. When we refresh, we now have progress bars that match the corresponding theme color.

[00:55] There may be times when you don't have the data need to provide the correct loading percentage. For these cases, you can use the mode of indeterminate by adjusting the mode input on the mat-progress-bar component. This provides us with a progress bar with an up and down fill animation that does need to correspond to a value input.

[01:11] If you have a situation where the user will be waiting for a response, but once the response is received, you want to show a clear progress bar think maybe a download, then you can use the mode query.

[01:19] To simulate this, I'm creating an observable that emits after two seconds. Once this happens, we'll switch the query mode to determinate. We'll update our progress bar value by 10, which we'll store in our query value here every half a second after that.

[01:31] To utilize this, all we have to switch is the mode of our mat-progress-bar to query, which is the initial value of our query mode property. While a mode is query, the value will be ignored, but once we switched the mode to determinate, the value will then be used. We now have a progress bar that starts with a more randomized animation, then switches to a fill based on the provided value.

[01:49] The last progress bar mode is buffer, which can be used with something like a video which has playback progress combined with loading progress. To utilize this, we need to switch the mode of our progress bar to buffer. We also need to add a buffer value to go along with our normal progress bar input value.

[02:08] To demo this in our component, I'm going to add an extra property called current playback and set the initial value to 0I'm then going to copy the loading progress observable and set the interval to slightly less than our normal loading progress so we can see both the loading progress and the buffer bar.

[02:22] When I refresh, we can see our buffer progress bar load at a slightly lighter shade than our normal progress bar.

[02:28] Angular Material also provides a loading spinner component. The default mode for Material spinners is indeterminate, meaning we don't know the current value of the load. Material spinners are themable, like progress bars, with the typical values of primary, accent, and warn.

[02:40] If you do have a loading value, you can switch to use the Material progress spinner and provide a value input. In this case, we're going to use the same value input that we used for our progress bar. When we refresh, we can see we now have a spinner that loads incrementally.

[02:55] Lastly, say you wanted your spinner to fade out once the loading percentage hit 100. You can do this with a combination of ngIf and an Angular animation. We'll add an ngIf that says, "Only show this spinner if the loading percentage is less than 100." We'll also add our animation hook.

[03:09] All that's left to do is add our animation definition to our component. To do this, we'll add an animations property to our component decorator. We'll then add a fadeIn trigger to match what we had in our component template. This will start with a state of n with an opacity of 1 and animate out to an opacity of 0when the ngIf condition is no longer met. Let's see how this looks.