ngx-loading-barAutomatic page loading / progress bar for Angular
@ngx-loading-bar
A fully automatic loading bar with zero configuration for Angular app (http, http-client and router).
Packages
- @ngx-loading-bar/router - Display loading bar when navigating between routes.
- @ngx-loading-bar/http-client - Display the progress of your
@angular/common/httprequests. - @ngx-loading-bar/core - Core module to manage the progress bar manually.
Demo
- online demo: https://angular-sypacw.stackblitz.io
- demo-app: Example utilizing all @ngx-loading-bar libraries.
Table of contents
- Getting started
- Global config
- Ignoring particular requests
- Manage multi loading bars separately
- Manually manage loading service
- Integration with Material Progress bar
- Credits
Getting started
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 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, ...) |
Global config
The global config can be adjusted by providing a value for LOADING_BAR_CONFIG in your application's root module.
import { LOADING_BAR_CONFIG } from '@ngx-loading-bar/core';
@NgModule({
providers: [
providers: [{ provide: LOADING_BAR_CONFIG, useValue: { latencyThreshold: 100 } }],
]
})
| Option | Description |
|---|---|
| latencyThreshold | The initial delay time to wait before displaying the loading bar. Default value is 0. |
Ignoring particular requests
The loading bar can also be forced to ignore certain requests, for example, when long-polling or periodically sending debugging information back to the server.
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
routerLinkdirective:
<a routerLink="/custom-path" [state]="{ ignoreLoadingBar: true }">Go</a>
Manage multi loading bars separately
In some case you may want to differentiate the reason why the loading bar is showing for example show the loading bar when an HttpClient request is being made, and a full page darkening overlay with a spinner when the router is routing to a new page in that case either use ref input or LoadingBarService to control a specific loading bar instance:
- using
refinput:
<!-- loading bar for router -->
<ngx-loading-bar ref="router"></ngx-loading-bar>
<!-- loading bar for http -->
<ngx-loading-bar ref="http"></ngx-loading-bar>
- using
LoadingBarServiceservice:
// select the router loader instance
const state = this.loader.useRef('router');
// control state
state.start();
state.complete();
// get the progress value
const value$ = state.value$;
Manually manage loading service
1. Import the LoadingBarModule
import { NgModule } from '@angular/core';
import { LoadingBarModule } from '@ngx-loading-bar/core';
@NgModule({
...
imports: [
...
LoadingBarModule,
],
})
export class AppModule {}
2. Inject/Use LoadingBarService
import { Component } from '@angular/core';
import { LoadingBarService } from '@ngx-loading-bar/core';
@Component({
selector: 'app',
template: `
...
<ngx-loading-bar></ngx-loading-bar>
<button (click)="loader.start()">start</button>
<button (click)="loader.complete()">Complete</button>
`,
})
export class App {
loader = this.loadingBar.useRef();
constructor(private loadingBar: LoadingBarService) {}
}
Integration with Material Progress bar
import { Component } from '@angular/core';
import { LoadingBarService } from '@ngx-loading-bar/core';
@Component({
selector: 'app',
template: `
...
<mat-progress-bar mode="determinate" [value]="loader.value$ | async"></mat-progress-bar>
`,
})
export class App {
constructor(public loader: LoadingBarService) {}
}
Lazy Loading modules
If you're using Lazy Loaded Modules in your app, please use LoadingBarRouterModule, because although a request is being fired in the nework console to fetch your lazy load module.js file, it won't trigger the LoadingBarHttpClientModule.
Credits
评论