Angular Material Progress Bar Loader

In this post, we will talk about using the Material library to implement the progress bar in an Angular application.

Introduction:

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

Here, we will utilize the CLI to build a new Angular project and discuss how to use the progress bar’s many types and features.  A progress bar is a horizontal line that animates the amount of work being done on a process, such as an image, document upload, or server transaction.

It is used to display the state of a process, which can be determined, showing the proportion of tasks performed and those still to be finished, or indeterminate, showing that the process is ongoing but that its duration is unknown.

In Angular Material, a Progress bar is implemented by adding a mat-progress-bar component available in the MatProgressBarModule.

Let’s start coding…

Create a new Project:

Create a new project by applying the following command in the terminal.

ng new ProgressbarDemo

 Install Angular Material in the project:

The following ng command may be used to install the Angular Material package.

ng add @angular/material

 Import Material Modules:

We must import the API module of the component we intend to utilize in the App module since the Material UI library offers a large selection of components.

we need to import MatProgressBarModule in the app.module.ts file as shown below

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 { MatProgressBarModule } from '@angular/material/progress-bar';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,

    MatProgressBarModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Adding different ProgressBar :

The mat-progress-bar directive in the template is used to construct the Progress Bar UI component of the Material toolkit. It is shown as a horizontal bar with an animated effect in between to demonstrate progress.

<mat-progress-bar
          [mode]="'indeterminate'">
</mat-progress-bar>

Here, The Progress Bar can have four types of modes.

1. 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>

2. indeterminate:
   It shows an animated bar in a forwarding direction.

   <mat-progress-bar mode='indeterminate'></mat-progress-bar>

3. buffer:
   This property takes value & buffer value depicting the loaded and remaining.

   <mat-progress-bar mode='buffer' value='20' bufferValue='50'></mat-progress-bar>

4. query:
   This model depicts the query is in progress.

   <mat-progress-bar mode='query'></mat-progress-bar>

To make your application’s user interface (UI) more professional and interactive, employ these loaders in place of plain loading text.

OUTPUT: