@ngx-loading-bar/core

Automatic page loading / progress bar for Angular

Stats

StarsIssuesVersionUpdatedCreatedSize
@ngx-loading-bar/core
5.1.25 months ago4 years agoMinified + gzip package size for @ngx-loading-bar/core in KB

Readme

@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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.