The <mat-progress-bar> is a
horizontal progress-bar for
indicating progress and activity.
The progress-bar supports four modes -
1. Determinate
- These operations perform where the
percentage of the operation complete.
2. Indeterminate
- These operations perform where the
user is asked to wait while something.
3. Buffer
- These operations perform where the
user wants to indicate some activity or loading from the server.
4. Query
- These operations perform where the
user wants to indicate pre-loading
For the Accessibility
- Each progress bar should be given a meaningful label –
1. aria-label
or
2. aria-labelledby
The example for Progress-bar as following –
progress-bar.html
–
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
progress-bar.ts
–
import {Component} from '@angular/core';
/**
* Indeterminate progress-bar
*/
@Component({
selector: 'progress-bar',
templateUrl: 'progress-bar.html',
styleUrls: ['progress-bar.css'],
})
export class ProgressBar {}
app.module.ts
–
import {NgModule} from '@angular/core';
import {CdkTableModule} from '@angular/cdk/table';
import {HttpClientModule} from '@angular/common/http';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http';
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {ProgressBar} from './app/progress-bar';
import {
MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatDatepickerModule,
MatDialogModule,
MatDividerModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatStepperModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
} from '@angular/material';
@NgModule({
exports: [
CdkTableModule,
MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatStepperModule,
MatDatepickerModule,
MatDialogModule,
MatDividerModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
]
})
export class DemoMaterialModule {}
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
HttpModule,
HttpClientModule,
DemoMaterialModule,
MatNativeDateModule,
ReactiveFormsModule,
],
entryComponents: [ProgressBar],
declarations: [ProgressBar],
bootstrap: [ProgressBar],
providers: []
})
export class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);
The Result looks like - https://stackblitz.com/edit/angular-jvcvai-yimrrv