Angular 2 Slim Loading Bar

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

Follow me to be notified about new releases.

Installation

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

Demo

Simple examples using ng2-slim-loading-bar:

• with SystemJS in ng2-systemjs-demo
• with Webpack in ng2-webpack-demo

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