Angular Material Progress Bar

Last Updated : 24 Apr, 2023

Angular Material is a User Interface (UI) library of a set of components for AngularJS developers. It consists of a number of high-quality, internationalized, reusable, and accessible components for developers. This library contains pre-developed components and elements which can be directly used to accomplish any functionality.

The Progress Bar is a component provided by the Angular Material library, that is used to indicate the progress in the activity or show the status of any specific job, i.e. it tells the user how much task has been completed in the form of a linear. For creating a Progress bar, we can use the <mat-progress-bar> tag. There are 4 different modes in Progress Bar, which are described below:

determinate: It is used to display the over-all percentage of completion for the specific task, i.e, how much progress has been done, that is visually represented. This is the default mode where the progress is displayed by the value property
indeterminate: It is used to display a progress bar with the unspecified waiting time.
buffer: It is used to indicate loading activity, if it is being from the server side.
query: It is used to display a continuously moving progress bar. It can be used to display preloading services.

Syntax:

<mat-progress-bar mode="" value=""></mat-progress-bar>

Installation Syntax: The main pre-requisite to work with Angular Material modules is to install Angular CLI in our system so that we can use the Angular Material UI library and its components. You can use the below command to install Angular CLI:

ng add @angular/material

Please refer to the Adding Angular Material Component to Angular Application article for the detailed installation procedure.

Adding Progress Bar component: To allow the use of the Progress Bar component, we need to import it in the app.module.ts file, then we need to add the “MatProgressBarModule” component into the “@NgModule” imports array.

import {MatProgressBarModule} from '@angular/material/progress-bar';

Creating Angular application & Module Installation:

Create an Angular.js application using the following command:

ng new foldername

After creating your project folder i.e foldername, move into that directory using the following command:

cd foldername

After creating the AngularJS application, Install the required module using the following command:

ng add @angular/material

Project Structure: The project structure will look like the following:

Project Structure

Example 1: This example illustrates the basic use of the Angular Material Progress Bar by implementing the determinate mode. Here, we will use the “MatProgressBarModule” component.

app.module.ts:

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } 
    from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } 
    from '@angular/platform-browser/animations';
import { MatProgressBarModule } 
    from '@angular/material/progress-bar';
 
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        MatProgressBarModule,
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html:

HTML

<div style="width: 450px; 
            text-align:center">
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h4>
        Angular Material Determinate
        Progress Bar
    </h4>
    <mat-progress-bar mode="determinate"
                      value="40">
    </mat-progress-bar>
</div>

app.component.ts:

Javascript

import { Component } from '@angular/core';
 
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'folderName';
}

Steps to run the program: To run the application execute the below command from the root directory of the project:

ng serve

Output: Your web application will be live on “http://localhost:4200”, as we can see from the following output:

Example 2: In this example, we will see progress-bar in “indeterminate” mode.

app.module.ts:

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } 
    from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } 
    from '@angular/platform-browser/animations';
import { MatProgressBarModule } 
    from '@angular/material/progress-bar';
 
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        MatProgressBarModule,
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html:

HTML

<div style="width: 450px; 
            text-align:center">
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h4>
        Angular Material Indeterminate
        Progress Bar
    </h4>
    <mat-progress-bar mode="indeterminate"
                      value="40">
    </mat-progress-bar>
</div>

app.component.ts:

Javascript

import { Component } from '@angular/core';
 
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'folderName';
}

Output:

Example 3: In this example, we will see progress-bar in “buffer” mode.

app.module.ts:

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } 
    from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } 
    from '@angular/platform-browser/animations';
import { MatProgressBarModule } 
    from '@angular/material/progress-bar';
 
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        MatProgressBarModule,
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html:

HTML

<div style="width: 450px; 
            text-align:center">
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h4>
        Angular Material Buffer
        Progress Bar
    </h4>
    <mat-progress-bar mode="buffer">
    </mat-progress-bar>
</div>

app.component.ts:

Javascript

import { Component } from '@angular/core';
 
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'folderName';
}

Output:

Example 4: In this example, we will see progress-bar in “query” mode.

app.module.ts:

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } 
    from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } 
    from '@angular/platform-browser/animations';
import { MatProgressBarModule } 
    from '@angular/material/progress-bar';
 
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        MatProgressBarModule,
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html:

HTML

<div style="width: 450px; 
            text-align:center">
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h4>
        Angular Material Buffer
        Progress Bar
    </h4>
    <mat-progress-bar mode="buffer">
    </mat-progress-bar>
</div>

app.component.ts:

Javascript

import { Component } from '@angular/core';
 
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'folderName';
}