Automatic Page Loading Progress Bar for Angular

ngx-loading-bar is a fully automatic loading bar with zero configuration for an Angular application (http, http-client, router).

ngx loading bar, angular progress bar with percentage, dynamic progress bar in angular, angular loading bar on top, angular material progress bar example, mat progress bar

How to make use of it:

1. Install @ngx-loading-bar:

# if you use `@angular/common/http`
  npm install @ngx-loading-bar/core @ngx-loading-bar/http-client --save

  # if you use `@angular/router`
  npm install @ngx-loading-bar/core @ngx-loading-bar/router --save

  # to manage loading-bar manually
  npm install @ngx-loading-bar/core --save

2. Import the installed libraries:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

// for HttpClient import:
import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client';

// for Router import:
import { LoadingBarRouterModule } from '@ngx-loading-bar/router';

// for Core import:
import { LoadingBarModule } from '@ngx-loading-bar/core';

import { AppComponent } from './app';

@NgModule({
  ...
  imports: [
    ...

    // for HttpClient use:
    LoadingBarHttpClientModule,

    // for Router use:
    LoadingBarRouterModule,

    // for Core use:
    LoadingBarModule
  ],
})
export class AppModule {}

3. Include ngx-loading-bar in your app component:

import { Component } from '@angular/core';

@Component({
  selector: 'app',
  template: `
    ...
    <ngx-loading-bar></ngx-loading-bar>
  `,
})
export class AppComponent {}

Customize `ngx-loading-bar`

You can pass the following inputs to customize the view:

Input	Description
color	The color of the loading bar. Default value is `#29d`.
includeSpinner	Hide or show the Spinner. Default value is `true`.
includeBar	Hide or show the Bar. Default value is `true`.
height	The height of the loading bar. Default value is `2px`.
diameter	The diameter of the progress spinner. Default value is `14px`.
fixed	set loading bar on the top of the screen or inside a container. Default value is `true`.
value	Set the value of the progress bar.
ref	Select the ref of a loading bar instance to display (`http`, `router`, …)