Search code examples
javascriptangular7spinner

ngx-spinner doesn't adjust to page getting bigger

the problem is that my spinner is covering the whole page at first BUT then, i'am showing new panels (page is getting bigger) and the spinner doesn't adjust.

For example, page's height is approximately 500px and then it goes to 1100px. And when i'am calling new http request, my spinner still cover only the first 500px. It doesn't adjust.

I'am using a loader component <app-loader><app-loader>:

<ngx-spinner
  bdColor="rgba(51,51,51,0.5)"
  size="medium"
  color="#fff"
  type="ball-atom"
  fullScreen= "true"
  class="myspinner">
</ngx-spinner>

inside my app.component.ts:

<div class="container" #mycontainer>

  <!-- loading spinner -->
  <app-loader></app-loader>

  <div nz-row nzType="flex" nzJustify="center">
    <div nz-col nzSpan="23">
      <router-outlet></router-outlet>
    </div>
  </div>

</div>

the css loader.component.scss is: 

.myspiner ::ng-deep .black-overlay{
  position: fixed !important;
}

Do you guys have any idea ?

i've already check this stackblitz . BUT here when the loader is triggered, the page is already long with scroll. It worked for me too if i trigger the spinner when the long scrollable page is already here.

Solution

  • Use ngx-spinner@7.2.0 with Angular 6

    image