@ngx-loading-bar/core

@ngx-loading-bar/core

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

1. Install @ngx-loading-bar/core

  npm install @ngx-loading-bar/core --save

2. Import the LoadingBarModule:

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

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

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

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

5. 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();
  }
}

Related packages

• @ngx-loading-bar/router - Display loading bar when navigating between routes.
• @ngx-loading-bar/http-client - Display the progress of your @angular/common/http requests.
• @ngx-loading-bar/http - Display the progress of your @angular/http requests.

Changelog

5.0.0 (2020-06-20)

⚠ BREAKING CHANGES

• core: The library now requires Angular 9

• core: The loading bar internal selectors has been changed:

Before:

<ngx-loading-bar>
  <div id="loading-bar-spinner"><div class="spinner-icon"></div></div>
  <div id="loading-bar"><div class="bar"><div class="peg"></div></div></div>
</ngx-loading-bar>

After:

<ngx-loading-bar>
  <div class="ngx-bar"></div>
  <div class="ngx-spinner"><div class="ngx-spinner-icon"></div></div>
</ngx-loading-bar>

Features

• core: change bar and spinner selector + unset z-index when fixed is false (#159) (f1ad7a8)
• core: set peerDependency to angular >=9.0 (185f1e2), closes #151
• core: support managing multiple loading bars (c59863f), closes #121
• core: use OnPush change detection (47d8cff)
• 🎸 remove deprecated @angular/http package (#139) (666e341)

Bug Fixes

• 🐛 prevent start when the timer is not triggered yet (88f5254), closes #143

<a name="4.2.0"></a>