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.

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
nithesh kumar Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
nithesh kumar
Guest
nithesh kumar

how to change color of spinner