loading...
Cover image for Automatic page loading/progress bar for Angular

Automatic page loading/progress bar for Angular

susomejias profile image Jesús Mejías Leiva ・2 min read

🔸 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

Enter fullscreen mode Exit fullscreen mode

🔸 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 {}
Enter fullscreen mode Exit fullscreen mode

🔸 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>
Enter fullscreen mode Exit fullscreen mode

🔸 Demo in my portfolio

Alt Text

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: '' }
});
Enter fullscreen mode Exit fullscreen mode

router:

  • using the router.navigateByUrl() method:
this.router.navigateByUrl('/custom-path', { state: { ignoreLoadingBar: true } });
Enter fullscreen mode Exit fullscreen mode
  • using the routerLink directive:
<a routerLink="/custom-path" [state]="{ ignoreLoadingBar: true }">Go</a>
Enter fullscreen mode Exit fullscreen mode

🔸 Source and more information on ngx-loading-bar

GitHub ngx-loading-bar repo here.



Thanks for reading me. 😊

Posted on by:

susomejias profile

Jesús Mejías Leiva

@susomejias

FullStack Web Developer at Wealize (Córdoba, Spain)

Discussion

pic
Editor guide
 

Just the article I was looking for. Thanks!

 
 

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

 

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

 

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

Thanks to you for your question 😊 👍

 

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

Error