UPDATE:3 After switching to a new router, I discovered that @borislemke's approach may not work with the CanDeactivate guard. I've decided to revert back to my old method mentioned in this answer.

UPDATE2: The Router events in the new-router version seem promising and the solution provided by @borislemke appears to address the main aspects of spinner implementation. Although I haven't tested it yet, I highly recommend considering it.

UPDATE1: This answer was written during the time of the Old-Router, when there was only one event route-changed triggered through router.subscribe(). Initially, I attempted to simplify the process by solely relying on router.subscribe() but it resulted in issues as there was no way to detect a canceled navigation. Consequently, I had to resort back to the longer approach (double work).

---

If you are familiar with Angular2, here is what you'll need to do:

---

Boot.ts

import {bootstrap} from '@angular/platform-browser-dynamic';
import {MyApp} from 'path/to/MyApp-Component';
import { SpinnerService} from 'path/to/spinner-service';

bootstrap(MyApp, [SpinnerService]);

Root Component- (MyApp)

import { Component } from '@angular/core';
import { SpinnerComponent} from 'path/to/spinner-component';
@Component({
  selector: 'my-app',
  directives: [SpinnerComponent],
  template: `
     <spinner-component></spinner-component>
     <router-outlet></router-outlet>
   `
})
export class MyApp { }

Spinner-Component (will subscribe to Spinner-service to change the value of active accordingly)

import {Component} from '@angular/core';
import { SpinnerService} from 'path/to/spinner-service';
@Component({
  selector: 'spinner-component',
  'template': '<div *ngIf="active" class="spinner loading"></div>'
})
export class SpinnerComponent {
  public active: boolean;

  public constructor(spinner: SpinnerService) {
    spinner.status.subscribe((status: boolean) => {
      this.active = status;
    });
  }
}

Spinner-Service (initialize this service)

Create an observable to be subscribed by spinner-component for changing the status on updates, and functions to determine and set the spinner as active/inactive.

import {Injectable} from '@angular/core';
import {Subject} from 'rxjs/Subject';
import 'rxjs/add/operator/share';

@Injectable()
export class SpinnerService {
  public status: Subject<boolean> = new Subject();
  private _active: boolean = false;

  public get active(): boolean {
    return this._active;
  }

  public set active(v: boolean) {
    this._active = v;
    this.status.next(v);
  }

  public start(): void {
    this.active = true;
  }

  public stop(): void {
    this.active = false;
  }
}

All Other Routes' Components

(example):

import { Component} from '@angular/core';
import { SpinnerService} from 'path/to/spinner-service';
@Component({
   template: `<div *ngIf="!spinner.active" id="container">Nothing is Loading Now</div>`
})
export class SampleComponent {

  constructor(public spinner: SpinnerService){} 

  ngOnInit(){
    this.spinner.stop(); // or perform this action on another event e.g., upon completion of data loading via xmlhttp request for the component
  }

  ngOnDestroy(){
    this.spinner.start();
  }
}

Have you considered using a straightforward CSS approach?

<router-outlet></router-outlet>
<div class="loading"></div>

In your stylesheet, you could have:

div.loading{
    height: 100px;
    background-color: red;
    display: none;
}
router-outlet + div.loading{
    display: block;
}

Alternatively, for a different solution:

<router-outlet></router-outlet>
<spinner-component></spinner-component>

Then you can add the following styles:

spinner-component{
   display:none;
}
router-outlet + spinner-component{
    display: block;
}

The key technique here is to ensure that new routes and components follow router-outlet, allowing us to easily toggle the loading indicator with CSS.

For custom logic specific to the initial route, you can implement the following approach:

MainComponent

    loaded = false;

    constructor(private router: Router....) {
       router.events.pipe(filter(e => e instanceof NavigationEnd), take(1))
                    .subscribe((e) => {
                       this.loaded = true;
                       alert('loaded - this fires only once');
                   });

I encountered a situation where I needed to hide my page footer that was showing at the top of the page. This method can also be used if you want to display a loader only for the initial page load.

Additional Note for 2024

The solution provided as the accepted answer is effective, but requires some slight adjustments to function properly in newer versions of Angular:

private destroyRef = inject(DestroyRef);

constructor(private router: Router) {
    this.router.events
        .pipe(takeUntilDestroyed(this.destroyRef))
        .subscribe((e) => {
            this.navigationInterceptor(e.type);
        });
}

private navigationInterceptor(eventType: EventType): void {
    if (eventType === EventType.NavigationStart) {
        this.isNavigating = true;
    }

    if (eventType === EventType.NavigationEnd) {
        this.isNavigating = false;
    }

    // To handle cases where requests fail, set loading state to false in NavigationCancel and NavigationError events
    if (eventType === EventType.NavigationCancel) {
        this.isNavigating = false;
    }

    if (eventType === EventType.NavigationError) {
        this.isNavigating = false;
    }
}

It's important to note that I have added a pipe with a destroy reference to the RxJs segment, which is a common practice when managing RxJs subscriptions. This specific syntax utilizing takeUntilDestroyed() is compatible with Angular 16 and later versions.