import { WrLoadingBar } from 'ngwr/loading-bar';WrLoadingBar
A progress bar at the top of the page for requests and other long tasks.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Live demo
Each start() opens a slot and each complete() closes one; the bar runs while any slot is open.
HTTP interceptor
Concurrent requests share one bar until the last one finishes.
import { HttpInterceptorFn } from '@angular/common/http';
import { inject } from '@angular/core';
import { finalize } from 'rxjs';
import { WrLoadingBar } from 'ngwr/loading-bar';
export const loadingInterceptor: HttpInterceptorFn = (req, next) => {
const bar = inject(WrLoadingBar);
bar.start();
return next(req).pipe(finalize(() => bar.complete()));
};Router navigation
Add provideWrLoadingBarRouter(), or navigation never moves the bar.
import { provideWrLoadingBarRouter } from 'ngwr/loading-bar/router';
providers: [provideRouter(routes), provideWrLoadingBarRouter()],Styling
Place one <wr-loading-bar> in the app shell.
<wr-loading-bar color="var(--wr-color-warning)" height="3px" />API
| Name | Description | Type | Default |
|---|---|---|---|
WrLoadingBar | Injectable service. | service | — |
start() | Open a slot. The bar creeps toward 90% while any slot is open. | () => void | — |
complete() | Close a slot. The last one fills the bar and hides it. | () => void | — |
reset() | Clear every slot and hide the bar at once. | () => void | — |
progress | Progress from 0 to 1, for a custom indicator. | Signal<number> | 0 |
state | idle, running or completing. | Signal<WrLoadingState> | 'idle' |
<wr-loading-bar> | The bar itself. | component | — |
color | Bar colour — any CSS colour value. | string | 'var(--wr-color-primary)' |
height | Bar height. | string | '2px' |
Dependencies
| Add-on | ngwr/loading-bar/router(needs @angular/router) |
|---|