Angular(v4) component that shows a loading bar at the top of a component or module

Installation

npm install ng4-loader-bar --save

Usage

Using SystemJS to load your files may require a update to your config:

System.config({
    map: {
        'ng4-loader-bar': 'node_modules/ng4-loader-bar/bundles/index.umd.js'
    }
});

Update your application/web page with the following markup

• Import the style.css into your web page or app.

 "styles": [
    "../node_modules/ng4-loader-bar/bundles/style.css"
 ]

• Add the <ng4-loader-bar></ng4-loader-bar> component tag within the component you want the loading bar to appear:

<div class="my-component">
    <h1>Component with a loading bar</h1>
    <ng4-loader-bar></ng4-loader-bar>
    ...   
</div>

The default styles are:

color: 'red';
height: '2px';

Import AngularLoadingBarModule

Import AngularLoadingBarModule.forRoot() in the NgModule of your application.

import {NgModule} from '@angular/core';
import {AngularLoadingBarModule} from 'ng4-loader-bar';

@NgModule({
    imports: [
        BrowserModule,
        AngularLoadingBarModule.forRoot()
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

Using a shared module allows AngularLoadingBarModule to be exported without having to import it multiple times.

@NgModule({
    imports: [
        BrowserModule,
        AngularLoadingBarModule.forRoot()
    ],
    exports: [BrowserModule, AngularLoadingBarModule],
})
export class SharedModule {
}

Using AngularLoadingBarService in your Angular application

• Import AngularLoadingBarService from ng4-loader-bar(within your node_modules directory) into your component code:

import {Component} from '@angular/core';
import {AngularLoadingBarService} from 'ng4-loader-bar';

@Component({
    selector: 'app',
    template: `
        <div>Hello world</div>
        <button (click)="startLoadingBar()">Start Loading</button>
        <button (click)="stopLoadingBar()">Stop Loading</button>
        <button (click)="completeLoadingBar()">Complete Loading</button>
        <ng4-loader-bar></ng4-loader-bar>
    `
})
export class AppComponent {
    
    constructor(private angularLoadingBarService: AngularLoadingBarService) { }
    
    startLoadingBar() {
        this.angularLoadingBarService.start();
    }

    stopLoadingBar() {
        this.angularLoadingBarService.stop();
    }

    completeLoadingBar() {
        this.angularLoadingBarService.complete();
    }
}

Customize the ng4-loader-bar to tailor to your application

Example: <ng4-loader-bar [color]="'green'" [height]="'6px'"></ng4-loader-bar>

You can use the following methods to control the SlimLoadingBar via instance of SlimLoadingBarService:

• start() - Start the loading progress. Use the callback function as an parameter to listed the complete event.
• stop() - Stop the loading progress. This method will pause the progress of the loading bar; start() will resume animation from the current position.
• reset()- Reset the position of loading progress to 0. This method will stop the current progress animation; using start() after reset() will start a new animation from 0.
• complete() - Set the progress to 100% and hide the progress bar.

Credits

Inspired by ngProgress.js and ng2-slim-loading-bar

License

MIT