Загрузчик не покрывает всю страницу

Question

Если на странице появляется прокрутка, а страница прокручивается вниз, то при вызове функции для отображения загрузчика она будет охватывать только верхнюю часть страницы. Как сделать так, чтобы загрузчик покрывал всю страницу, даже если страница прокручивается до нижнего колонтитула сайта?

Любая страница:

<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;
}

Answer 1

Другим способом может быть использование:

container {
    position:fixed;
    left:0;
    top:0;
    right:0;
    bottom:0;
}

Answer 2

Вы уже пробовали с шириной: 100vw и высотой: 100vh для грузового контейнера (вместо 100%}?