Ngx spinner is blocking whole page using Angular

Question

I am implementing ngx-spinner in my application using Angular but the issue is I need it to load on specific area of the page but it blocking entire page. I am explaining my code below.

<p> Hello name </p>
<div class="content" style="margin-top: 55px;">
    <div style="position: relative">
      <ngx-spinner bdColor = "rgba(0, 0, 0, 0.8)" size = "medium" color = "#fff" type = "square-jelly-box" [fullScreen] = "true"><p style="color: white" > Loading... </p></ngx-spinner>
    </div>
    <cui-modal></cui-modal>
    <router-outlet></router-outlet>
  </div>

Here I need to load the spinner inside the <div class="content" style="margin-top: 55px;"></div> only means the contents inside this div will be blocked but its blocking the entire screen. Please help me to resolve this issue.

Answer 1

I follow your description and created a stackblitz example, I found maybe just input is wrong?

I found the document has this configuration. https://github.com/Napster2210/ngx-spinner Just set fullScreen false can avoid spinner cover the whole page.

Fullscreen Mode(Enable/Disable)

This is my partial template code.

    <ngx-spinner
          bdColor="rgba(0, 0, 0, 0.8)"
          size="medium"
          color="#fff"
          type="square-jelly-box"
          [fullScreen]="false"
          ><p style="color: white">Loading...</p>
    </ngx-spinner>

Example: https://stackblitz.com/edit/angular-wbcrve?file=src/app/app.component.html