Automatic page loading/progress bar for Angular

🔸 Introduction

Today I come to show you a library that helps us show a progress bar, which will be shown in every http request we make on our Angular website, I consider this functionality essential since it is a very visual way to show the progress of loading of the request to the user of our website.

🔸 Installation

  # 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

🔸 Import @ngx-loading-bar packages

We must import the packages previously installed in our app.module.ts.

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 {}

🔸 Add to your app component

Use your ngx-loading-bar in your app.component.html template:

<ngx-loading-bar color="#CD67BA" height="4px"></ngx-loading-bar>

🔸 Demo in my portfolio

Show more in me Portfolio.

🔸 Customize with the following entries

Input	Description
color	The color of 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 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, ...)

🔸 Ignoring particular requests

http-client:

Http client doesn't allow passing custom option, in order to achieve that we made a temporary solution (by passing the option throught the header) that will be removed once http-client come with a proper solution.

// ignore a particular $http GET:
httpClient.get('/status', {
  headers: { ignoreLoadingBar: '' }
});

router:

• using the router.navigateByUrl() method:

this.router.navigateByUrl('/custom-path', { state: { ignoreLoadingBar: true } });

• using the routerLink directive:

<a routerLink="/custom-path" [state]="{ ignoreLoadingBar: true }">Go</a>

🔸 Source and more information on ngx-loading-bar

GitHub ngx-loading-bar repo here.

Thanks for reading me. 😊

Comments

[Prafull]

I want to hide loading spinner, includeSpinner="false" is not working.

[Jesús Mejías Leiva]

Did you try this way? [includeSpinner] = "false"

[Prafull]

That's too quick response, now it is working properly thank you

[Jesús Mejías Leiva]

Thanks to you for your question 😊 👍

[Vishal Kathiriya]

It's not working and instead throws the below error while building an application:

[Thivagar]

Anybody found a solution for this?

Angular version: 8

[Wayne Gakuo]

Just the article I was looking for. Thanks!

[Jesús Mejías Leiva]

Thanks!! 😊