WrLoadingBar

import { WrLoadingBar, WrLoadingBarComponent } from 'ngwr/loading-bar';

@Component({
  selector: 'app-shell',
  template: `
    <wr-loading-bar />
    <router-outlet />
  `,
  imports: [WrLoadingBarComponent, RouterOutlet],
})
export class AppShell {
  // Inject once at the shell so the singleton exists before the first
  // navigation. The subscription itself comes from provideWrLoadingBarRouter().
  constructor() {
    inject(WrLoadingBar);
  }
}

// HttpInterceptor — start a slot per pending HTTP request.
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()));
};

<!-- Customise color + thickness via attributes. -->
<wr-loading-bar color="var(--wr-color-warning)" height="3px" />