Angular 7 Material | Add Progress Spinner / Loader in Angular Application Example

In a web application, we generally show a process status by graphical indicators like progress bars and spinners. In this post, we will discuss How to Implement the most common progress indicator Progress bar and Spinners.

Angular Material provides a wide range of web components which are very easy to implement and use in Angular applications.

Here we will create a new Angular 7 project using CLI and discuss How to use Progress bar and Spinning Loader. These are of two types Determinate and Indeterminate.

Determinate type of loaders show the progress of processes which can be indicated to users in terms of percentage of work done from 0 to 100%

Indeterminate loaders show progress with animation to indicate the process is going on and completion and the current status are not known.

Let’s start to implement …

Create a new Angular project using ng CLI. Make sure to have the latest version of CLI installed

Install Angular Material in project

Run following NPM commands to install material, cdk and animations packages

Import BrowserAnimationsModule in app.module.ts file

include Material theme in styles.css

Now our Angular project is ready to use Material components.

Progress spinner

To use Progress spinner import MatProgressSpinnerModule in app.module.ts and add in the imports array

Now you only need to add the following template where you want to show it

Check more details on HTTP loader here 

the mode can have a ‘determinate‘ or ‘indeterminate‘ option. Check more examples options here

Progress bar

Similar like progress spinner we will import MatProgressBarModule in app.module.ts file

Also, check How to show loaders during HTTP call in Angular application using Interceptors.

That’s all you can try these loaders in place of simple loading text making your application UI more professional and interactive.

Leave a Reply

avatar
  Subscribe  
Notify of