kit-loading

README

Scope

  • Loading bar
  • Global loading spinner
  • Local progress indication

API

[class] KitLoadingProgress

Members

SignatureDescription
constructor(public readonly id: string)
get state(): KitLoadingState
get stateChanges(): Observable<KitLoadingState>
start(key?: string): KitLoadingEndFn
end(key?: string)

[class] KitLoadingService

@Injectable

Provided in:'root'

Service for providing loading state.

Usage

Global progress

Provide KitLoadingService, get global progress and subscribe on state changes:

constructor(private loading: KitLoadingService) {
}
 *
ngOnInit() {
  this.loading.global.stateChanges
    .subscribe(s => {
      this.loadingState = s;
    });
}

There are two states: KitLoadingState.InProgress and KitLoadingState.None.

State changes on NavigationStart and NavigationEnd event by default.

Also you can run progress manually. For example, show loading progress while data is fetching:

this.loading.global.start('data');
this.dataService.get().subscribe(() => {
  ...
  this.loading.global.end('data');
});

State switched to None only after all started events was ended.

Custom progress

Get a progress by .progress(key: string) method, if progress is not presented it will be automatically created.

Custom progresses do not watch on router events, only on manual start/end calls.

this.loading.progress('data-loading').start('data');
this.dataService.get().subscribe(() => {
  ...
  this.loading.progress('data-loading').end('data');
});

Example

Members

SignatureDescription
get global(): KitLoadingProgress
progress(id: string): KitLoadingProgress