npm

ng2-slim-loading-bar-rc4
TypeScript icon, indicating that this package has built-in type declarations

1.4.2 • Public • Published

Angular 2 Slim Loading Bar npm version npm monthly downloads

Angular2 component shows slim loading bar at the top of the page of your application.

Build Status semantic-release Commitizen friendly Dependency Status devDependency Status

Follow me twitter to be notified about new releases.

Installation

npm install ng2-slim-loading-bar --save

Demo

Simple examples using ng2-slim-loading-bar:

Online demo available here

Usage

If you use SystemJS to load your files, you might have to update your config:

System.config({
    map: {
        'ng2-slim-loading-bar': 'node_modules/ng2-slim-loading-bar'
    },
    packages: {
        'ng2-slim-loading-bar':  { main: 'index.js',  defaultExtension: 'js' },
    }
});

Finally, you can use ng2-slim-loading-bar in your Angular 2 project:

  • Import SlimLoadingBarService, SlimLoadingBarComponent from ng2-slim-loading-bar
  • Instantiate SlimLoadingBarService in the bootstrap of your application;
  • Add SlimLoadingBarComponent to the "directives" property of your application component;
  • Add <ng2-slim-loading-bar></ng2-slim-loading-bar> tag in template of your application component.
import {Component} from '@angular/core';
import {SlimLoadingBarService, SlimLoadingBarComponent} from 'ng2-slim-loading-bar';
import {bootstrap} from '@angular/platform/browser';
 
@Component({
    selector: 'app',
    directives: [SlimLoadingBarComponent],
    providers: [SlimLoadingBarService]
    template: `
        <div>Hello world</div>
        <button (click)="startLoading()">Start Loading</button>
        <ng2-slim-loading-bar></ng2-slim-loading-bar>
    `
})
export class AppComponent {
    
    constructor(private slimLoadingBarService:SlimLoadingBarService) { }
    
    startLoading() {
        // We can listen when loading will be completed
        this.slimLoadingBarService.start(() => {
            console.log('Loading complete');
        });
    }
}
 
bootstrap(AppComponent);

License

MIT

Credits

Inspired by ngProgress.js

Package Sidebar

Install

npm i ng2-slim-loading-bar-rc4

Weekly Downloads

0

Version

1.4.2

License

MIT

Last publish

Collaborators

  • russon77