Skip to content
Automatic page loading / progress bar for Angular
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.config chore(release): 4.0.0 Jan 1, 2019
demo/src refactor: rely on rxjs timer$ instead of setTimeout (#123) Apr 29, 2019
packages refactor: rely on rxjs timer$ instead of setTimeout (#123) Apr 29, 2019
.editorconfig feat(demo): use @angular/cli. Oct 23, 2017
.gitignore test(core): Add tests (#34) Nov 29, 2017
.npmignore add readme + small fixes. Dec 13, 2016
.travis.yml chore: add github-release (#122) Apr 26, 2019
CHANGELOG.md chore(release): 4.2.0 Feb 28, 2019
LICENSE Create LICENSE Nov 27, 2017
README.md
angular.json feat: set peerDependency to angular >=7.0 (#108) Nov 22, 2018
package-lock.json chore: add github-release (#122) Apr 26, 2019
package.json chore: add github-release (#122) Apr 26, 2019
setupJest.ts test(core): Add tests (#34) Nov 29, 2017
tsconfig-spec.json feat: set peerDependency to angular >=7.0 (#108) Nov 22, 2018
tsconfig.json feat: deprecate forRoot calls (#109) Nov 22, 2018
tsconfig.spec.json feat(core): Upgrade to Rxjs 6 and drop support of angular v4. May 4, 2018
tslint.json feat(core): Upgrade to Rxjs 6 and drop support of angular v4. May 4, 2018

README.md

@ngx-loading-bar


A fully automatic loading bar with zero configuration for Angular app (http, http-client and router).

Npm version Downloads Build Status


Packages

Demo

Table of contents

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/http`
  npm install @ngx-loading-bar/core @ngx-loading-bar/http --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';

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

// for Http import LoadingBarHttpModule:
// import { LoadingBarHttpModule } from '@ngx-loading-bar/http';

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

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

import { AppComponent } from './app';

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

    LoadingBarHttpClientModule

    // for Http use:
    // LoadingBarHttpModule,

    // for Router use:
    // LoadingBarRouterModule

    // for HttpClient use:
    // LoadingBarHttpClientModule

    // for Core use:
    // LoadingBarModule.forRoot()
  ],
})
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.

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: '' }
});

http:

// ignore a particular $http GET:
http.get('/status', {
  { headers: new 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>

Manually manage loading service

1. Import the LoadingBarModule

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

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

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

    LoadingBarModule.forRoot(),
  ],
})
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)="startLoading()">start</button>
    <button (click)="stopLoading()">stop</button>
  `,
})
export class App {
  constructor(private loadingBar: LoadingBarService) {}

  startLoading() {
    this.loadingBar.start();
  }
  
  stopLoading() {
    this.loadingBar.complete();
  }
}

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.progress$|async"></mat-progress-bar>
  `,
})
export class App {
  constructor(public loader: LoadingBarService) {}
}

Credits

You can’t perform that action at this time.