Simple loading bar on the top of your page to indicate page loading loading. Adds a collection of additional controls on to [pleerock]'s original module: ng2-loading-bar
Service workers you can call: *Start *Stop *Complete *Reset *Set (0-100) *Fill
-
Install npm module:
npm install ng2-loading-bar --save
-
If you are using system.js you may want to add this into
map
andpackage
config:{ "map": { "ng2-loading-bar": "node_modules/ng2-loading-bar" }, "packages": { "ng2-loading-bar": { "main": "index.js", "defaultExtension": "js" } } }
Import LoadingBarModule
and put loading bar component to the top of your page, most probably near the main header.
<loading-bar color="#FF0000" [height]="3" [animationTime]="0.3" [runInterval]="100" [progress]="0"></loading-bar>
progress
is overall loading progresscolor
color of the loading barheight
height of the loading baranimationTime
css animation time in msrunInterval
interval during which loading will increase its percents
You can also use LoadingBarService
service to control your loading bar progress - start and stop loading.
import {Component} from "@angular/core";
import {LoadingBarModule, LoadingBarService} from "ng2-loading-bar";
@Component({
selector: "app",
template: `
<div class="container">
<loading-bar #loadingBar [height]="height" [color]="color" [runInterval]="runInterval"></loading-bar>
<br/>
<br/>
<button (click)="loadingBar.start()">start</button><br/>
<button (click)="loadingBar.stop()">stop</button><br/>
<button (click)="loadingBar.reset()">reset</button><br/>
<button (click)="loadingBar.complete()">complete</button><br/>
<br/>
change height: <input [(ngModel)]="height"><br/>
change color: <input [(ngModel)]="color"><br/>
run interval: <input [(ngModel)]="runInterval"><br/>
<br/>
<button (click)="emitStart()">dispatch start event using service</button>
<button (click)="emitStop()">dispatch stop event using service</button>
<button (click)="emitReset()">dispatch reset event using service</button>
<button (click)="emitComplete()">dispatch complete event using service</button>
</div>
`
})
export class Sample1App {
height = 2;
color = "#4092F1";
runInterval = 300;
constructor(private loadingBarService: LoadingBarService) {
}
emitStart() {
this.loadingBarService.start();
}
emitStop() {
this.loadingBarService.stop();
}
emitReset() {
this.loadingBarService.reset();
}
emitComplete() {
this.loadingBarService.complete();
}
}
@NgModule({
imports: [
// ...
LoadingBarModule
],
declarations: [
App
],
bootstrap: [
App
]
})
export class AppModule {
}
Take a look on samples in ./sample for more examples of usages.