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 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 …
# Setup Angular CLI
We’ll create Angula project in the latest version. Make sure you have updated the Angular CLI tool by running below npm
command in the terminal
$ npm install -g @angular/cli
# Create an Angular Project
Execute below ng
command to create an Angular project in latest version 9.1.3. But this tutorial is compatible with previous version 7,6,5 and 4
$ ng new angular-material-loaders
$ cd angular-material-loaders
# Install Angular Material in project
After version 8, Angular Material package can be installed by executing the following ng
command. For configuration, it will ask a few questions related to the theme, browser animations etc
$ ng add @angular/material
Answer questions
? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink
? Set up global Angular Material typography styles? Yes
? Set up browser animations for Angular Material? Yes
Now our Angular project is ready to use Material components.
# Import Material Modules
The Material UI library provides a wide variety of components, so we need to import the API module of the component we are going to use in the App module.
Here as we'll be using the Progress Spinner and Progress Bar so we need to import MatProgressSpinnerModule
and MatProgressBarModule
in the app.module.ts file as shown below
// app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; import { MatProgressBarModule } from '@angular/material/progress-bar'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, BrowserAnimationsModule, MatProgressSpinnerModule, MatProgressBarModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
# Adding Progress spinner
The Progress spinner is implemented by adding the mat-progress-loader
component in the template.
Now you only need to add the following template where you want to show it
<mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
Option Properties
[color]
: Color of the Spinner loader can be changed eg 'primary
', 'accent
', 'warn
'
[mode]
: The Spinner can be used as a loader or depict progress in percentage 0 to 100. To switch we set [mode] with 'determinate
' (progress) or 'indeterminate
' (loader)
[value]
: When [mode] is set to 'determinate
' we can pass percentage as value to show progress
<mat-progress-spinner mode="determinate" value='66'></mat-progress-spinner>
[diameter]
: The diameter of the spinner can be changed effecting its size.
<mat-progress-spinner mode="determinate" value='66' diameter="45"></mat-progress-spinner>
strokeWidth
: Its the width of the spinner.
Check more details on HTTP loader here
# Adding a Progress bar
The Progress Bar UI component of the Material library is implemented using the mat-progress-bar
directive in the template. It is shown as a Horizontal bar which shows progress as an animated effect in between.
<mat-progress-bar
[mode]="'indeterminate'">
</mat-progress-bar>
Option Properties
[mode]
: The Progress Bar can have four types of modes
'determinate
': This property takes a number in the value
property from 0 to 100 showing progress
<mat-progress-bar mode='determinate' value="66"></mat-progress-bar>
'indeterminate
': Shows animated bar in the forward direction
<mat-progress-bar mode='indeterminate'></mat-progress-bar>
'buffer
': This takes the value
and the bufferValue
depicting the loaded and remaining
<mat-progress-bar mode='buffer' value='35' bufferValue='66'></mat-progress-bar>
'query
': This mode depicts the query is in progress but not resolved yet
<mat-progress-bar mode='query'></mat-progress-bar>
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.
very good thank you
how to change color of spinner