A fully automatic loading bar with zero configuration for Angular app (http, http-client and router).
- @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.
- Getting started
- Global config
- Ignoring particular requests
- Manage multi loading bars separately
- Manually manage loading service
- Integration with Material Progress bar
- Credits
# 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 --saveWhich Version to use?
| Angular version | @ngx-loading-bar/core |
|---|---|
| >=13.0 | 6.x |
| >=9.0 | 5.x |
| >=7.0 | 4.x |
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 {}Note: If using LoadingBarHttpClientModule with Angular Standalone APIs, ensure you import the providers from the module in the ApplicationConfig providers array:
import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client';
export const appConfig: ApplicationConfig = {
providers: [
...
importProvidersFrom(LoadingBarHttpClientModule),
],
};import { Component } from '@angular/core';
@Component({
selector: 'app',
template: `
...
<ngx-loading-bar></ngx-loading-bar>
`,
})
export class AppComponent {}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, ...) |
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. |
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.
// ignore a particular $http GET:
httpClient.get('/status', {
context: new HttpContext().set(NGX_LOADING_BAR_IGNORED, true),
});- 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>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$;import { NgModule } from '@angular/core';
import { LoadingBarModule } from '@ngx-loading-bar/core';
@NgModule({
...
imports: [
...
LoadingBarModule,
],
})
export class AppModule {}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) {}
}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.