Loader does not cover the entire page

If a scroll appears on the page and the page scrolls down, then when you call the function to display the loader, it will cover only the top of the page. How to make the loader cover the entire page even if the page is scrolled to the site footer?

Any page:

<app-loader [loader]="loading"></app-loader>
...

loader.component.html:

<div class="load-container" *ngIf="loader">
  <div class="load-speeding-wheel"></div>
</div>

loader.component.ts:

@Input() loader: boolean = false;

layout.component.html:

<div class="container">
  <app-toolbar (sideNavToggled)="snav.toggle()"></app-toolbar>
  <mat-sidenav-container class="sidenav-container" [style.marginTop.px]="toolBarHeight">
    <mat-sidenav #snav class="sidenav" [(mode)]="sideNavMode" [(opened)]="sideNavOpened">
      <app-sidenav></app-sidenav>
    </mat-sidenav>
    <mat-sidenav-content> 
      <main class="main-container">
        <router-outlet></router-outlet>
      </main>
      <app-footer></app-footer>
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>

loader.css:

.load-container {
    width           : 100%;
    height          : 100%;
    text-align      : center;
    position        : absolute;
    left            : 0;
    top             : 0;
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
    background-color: rgba(0, 0, 0, 0.3);
    z-index         : 10;
}