Automatic Page Loading Progress Bar For Angular 2+ – ngx-loading-bar

Description:

A fully automatic loading bar with zero configuration for Angular 2+ app (http, http-client and router).

Installation:

# Yarn
$ yarn add @ngx-loading-bar/core

# NPM
$ npm install @ngx-loading-bar/core --save

Basic usage:

Import.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { LoadingBarHttpModule } from '@ngx-loading-bar/http';
import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client';
import { LoadingBarRouterModule } from '@ngx-loading-bar/router';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  declarations: [
    AppComponent,
    HelloComponent,
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      { path: '', component: HelloComponent },
      { path: 'home', component: HelloComponent },
    ]),

    BrowserAnimationsModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,

    LoadingBarHttpModule,
    LoadingBarHttpClientModule,
    LoadingBarRouterModule,
  ],
  bootstrap: [AppComponent],
})
export class AppModule {
}

In your component.

<ngx-loading-bar></ngx-loading-bar>

Preview: