Simple loading bar on the top of the page to indicate page loading process.
npm install ngx-loading-barSimple loading bar on the top of your page to indicate page loading loading.
1. Install npm module:
npm install ngx-loading-bar --save
2. If you are using system.js you may want to add this into map and package config:
``json`
{
"map": {
"ngx-loading-bar": "node_modules/ngx-loading-bar"
},
"packages": {
"ngx-loading-bar": { "main": "index.js", "defaultExtension": "js" }
}
}
Usage
Import LoadingBarModule and put loading bar component to the top of your page, most probably near the main header.
`javascript`
* 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.
`javascript
import {Component} from "@angular/core";
import {LoadingBarModule, LoadingBarService} from "ngx-loading-bar";
@Component({
selector: "app",
template:
change height:
change color:
run interval:
})
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.