Angular material progress bar | mat-progress-bar example


In this blog post, We are going to learn Angular material progress bar with example

progress bar ui element

Progress bar is an interactive UI element to show the progress of an operations, For example, You need to show status in graphical form during downloading,uploading and copying a file.

There are different types of progress bar

  • determinate progress bar - progress bar is shown in known progress of an operation, For example 3 minutes
  • indeterminate progress bar - The time taken to take a operation is not known at displaying progress bar.

The progress bar ui element can be used in Web, mobile and desktop applications.

Best example for progress bar can be observed in showing progress operation when you are copy files from one folder to another folder in windows.

Angular Material framework progress bar with rich functionalities which can be reused across angular applications.

Angular material progress bar example

To use progress bar in angular application, Material framework provides MatProgressBarModule which you need to import into app.module.ts

import { BrowserModule } from "@angular/platform-browser";

import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";

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


@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatProgressBarModule
  ],
  declarations: [AppComponent,],
  bootstrap: [AppComponent],
  providers: [],
  exports: [AppComponent]
})
export class AppModule {}

MatProgressBarModule contains mat-progress-bar component

Create a component app.component.ts

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

Buffer progress-bar

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

indeterminate progress bar
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
Query Progress
<mat-progress-bar mode="query"></mat-progress-bar>

Output

Angular material progress bar example

As you can see there are different progress bar types for mode attribute

  • determinate

In this operation time taken known and displays the progress bar according to it

<mat-progress-bar mode="determinate" value="40"></mat-progress-bar>
  • indeterminate

In this progress bar status is not known, Best example is to API response returned from backend

<mat-progress-bar mode="indeterminate"></mat-progress-bar>
  • buffer Buffer is a updating status of an operation for buffer value seconds.
<mat-progress-bar mode="buffer" value=20 bufferValue=40></mat-progress-bar>
  • query Query mode starts progress bar defaults and based on known /unknow status, it will load determinate /indeterminate mode.
<mat-progress-bar mode="query" ></mat-progress-bar>

How to change progress bar color

progress bar uses theme of an material styles.

Each component has following colors

prime - primary color accent - secondary color war - neutral color

Then how can change the filling background color of an progress bar, By default it uses primary blue

::ng-deep .mat-progress-bar-fill::after {
    background-color: red;
}

::ng-deep .mat-progress-bar-buffer {
    background: red;
}

How can progress bar hight can be increased?

::ng-deep .mat-progress-bar {
        height: 8px;

}

Or you can still write a custom class in css/scss

mat-progress-bar.downloadProgress .mat-progress-bar-fill::after {
  background-color: red;
}

add the custom class in class attribute of mat-progress-bar

<mat-progress-bar class="downloadProgress" mode="determinate" value="60"></mat-progress-bar>

How to display progress bar in time interval?

This is an example of displaying progress bar in time interval, For example, Displaying the progress bar status in every second from 0 to 60 seconds.

<mat-progress-bar mode="determinate" [value]="value"></mat-progress-bar>

value by default is zero and increase 1 for every 1 second

 value = 100;
  seconds: number = 0;
  ngOnInit() {
    const time = 60;
    const timer$ = interval(1000);

    const subscribe = timer$.subscribe(second => {
      this.value = 100 - (sec * 100) / 60;
      this.seconds = second;

      if (this.seconds === 60) {
        subscribe.unsubscribe();
      }
    });
  }

Angular material progress bar animations not showing

Some times, once you configured everything, you will see below problems

  • Indeterminate progress bar not working properly
  • query mode are not animated properly.

All this issues are related to animations as well as styles How do you fix those issues?

Please follow below steps to fix all progress bar issues

  • Please make sure that BrowserAnimationsModule is imported in application root or your module.material components depends on BrowserAnimationsModule module.

  • Please don’t import NoopAnimationsModule, as this force to disable animations in progress bar

  • In style.scss , Please import material theme, so that all progress bar selectors are initialized with theme styles.

@import '~@angular/material/core/theming/prebuilt-themes/deeppurple-amber.css';

Conclusion

In summary, This post discussed about angular material progress bar example usage, modes and also how to customize the custom style,css selectors, and also adding time interval progress bar example, finally discussed about progress bar animation issues.

THE BEST NEWSLETTER ANYWHERE
Join 90,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts