Angular 7 - ngx-spinner covering the whole page

Question

I have implemented ngx-spinner in my angular 7 page and set the fullscreen to false as I don't want the header to be covered by the background color of the spinner. It still covers the whole page while rendering. Not sure what the problem is.

Following is the link that I referred to

https://napster2210.github.io/ngx-spinner/

.alert {
    margin-top: 10px;
    height: 500x;
    position: relative;
    width: 100%;
    /* padding: 15px; */
    bottom: 0%;
    border: 1px solid transparent;
    border-radius: 4px;
    float: left;
}

.alert-danger {
    background-color: #f2dede;
    border-color: #ebccd1;
    color: #a94442;
}

table {
    border-collapse: collapse;
}

.spacing {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.k-tabstrip > .k-content.k-state-active {
    display: none !important;
}

<div style="overflow-x: hidden; overflow-y: hidden;">
  <ngx-spinner bdOpacity=0.9 bdColor="#fff" size="medium" color="grey" type="ball-spin" fullScreen="false">
    <p style="color: white"> Loading... </p>
  </ngx-spinner>
  <div class="form-group row col-md-12" style="margin-top:30px">
    <div class="col-md-1">
      <label for="inputFax" class="col-form-label" style="font-weight: bold;">Eval Date</label>
      <kendo-datepicker style="width: 100% ;float: left;" [format]="'MMMM yyyy'" [topView]="'decade'"
        [bottomView]="'year'" [(ngModel)]="evalDate" (valueChange)="evalDateChanged($event)">
      </kendo-datepicker>
    </div>

    <div class="col-md-2" style="padding-left: 10px; width: 100%"><a class="btn btn-primary "
        (click)="downloadFundAllocationDetails()" [attr.href]="Url">Export To
        EXCEL<i title="PDF" class="fa fa-file-excel-o"></i> </a></div>
  </div>
  <div class="form-group row">
    <div class="panel panel-default col-md-12  ">
      <div *ngIf="AllocationDetails && AllocationDetails.ManagerAllocations" class="panel-body">
        <div id="grid-wrapper" [style.height.px]="GridHeight()" [style.width.%]="100" style="float: left;">
          <span style="text-decoration: underline; cursor: pointer;padding-right: 10px;"><a (click)="expandAll()">Expand
              All</a></span>
          <span style="text-decoration: underline; cursor: pointer;"><a (click)="collapseAll()">Collapse
              All</a></span>
          <ag-grid-angular #agGrid class="ag-theme-balham" [gridOptions]="GridOptions" style="width: 100%; height: 100%"
            [columnDefs]="ColumnDefs" [rowData]="AllocationDetails.ManagerAllocations" rowHeight="30" headerHeight="30"
            rowSelection="single" [pinnedBottomRowData]="pinnedBottomRowData"
            [frameworkComponents]="frameworkComponents">
          </ag-grid-angular>
        </div>

      </div>
    </div>
  </div>

  <div class="form-group row">
    <div class="panel panel-default col-md-12">
      <div style="height: 100%; width: 100%;" *ngIf="AllocationDetails && AllocationDetails.MissingProducts"
        class="alert alert-danger col-md-5">
        <p><strong>The investments made in the following products are not included in this report:</strong></p>
        <table>
          <ng-container *ngFor="let group of AllocationDetails.MissingProducts">
            <tr>
              <th> {{group[0].ProductType}}</th>
            </tr>
            <tr *ngFor="let post of group">
              <td> {{ post.ProductName  }} </td>
            </tr>
            <tr>
              <td class="spacing"></td>
            </tr>
          </ng-container>
        </table>
      </div>
      <div style="height: 100%; width: 100%; float:left;" *ngIf="AllocationDetails && AllocationDetails.ChartData"
        class="col-md-7">
        <app-pie-chart [series]="allocation_series"></app-pie-chart>
      </div>
    </div>
  </div>
</div>

the same issue is discussed here, plz have alook https://github.com/Napster2210/ngx-spinner/issues/5#issuecomment-450422594 — Kenana Reda, Apr 04 '19 at 10:54
I tried applying both class="black-overlay" on the div enclosing spinner and spinner as well but none is working — Tom, Apr 04 '19 at 11:11
try to use https://github.com/kuuurt13/ng-block-ui, I use it and the opacity is great — Gaspar, Apr 04 '19 at 11:16

score 18 · Answer 1 · edited Oct 23 '20 at 22:45

18

Wrap it in a div with relative position if you want it to fill the container it's in:

<div style="position: relative">
  <ngx-spinner
      bdOpacity = 0.9
      bdColor = "#f4f4f9"
      size = "medium"
      color = "#1010ee"
      type = "ball-clip-rotate"
      [fullScreen] = "false">
  </ngx-spinner>
</div>

edited Oct 23 '20 at 22:45

HDJEMAI

9,436
46
67
93

answered Jan 19 '20 at 19:03

ceebreenk

1,031
2
14
29

Zuhaib TALAAT · Answer 2 · 2019-07-03T10:59:14.457

2

In your case you forgot the square brackets. You have to do it like this:

<ngx-spinner bdOpacity=0.9 bdColor="#fff" size="medium" color="grey" type="ball-spin" [fullScreen]="false">
    <p style="color: white"> Loading... </p>
</ngx-spinner>

edited Jul 03 '19 at 10:59

answered Jul 03 '19 at 10:49

Zuhaib TALAAT

29
4

M Komaei · Answer 3 · 2022-02-28T07:53:52.927

For show it only on layout container div add app-spinner tag after router-outlet :

<div class="col content">
    <router-outlet #o="outlet"></router-outlet>
    <div class="complement-box"></div>
    <ngx-spinner bdColor="rgba(0,0,0,0.32)" size="large" color="#8652d5" type="ball-clip-rotate-multiple"
        [fullScreen]="false">
    </ngx-spinner>
</div>

For set border of spinner set this style in styles.scss file :

.overlay[_ngcontent-serverApp-c52] {
    border-radius: 43px;
    height: 106% !important;
    margin-top: -1px;
}

Angular 7 - ngx-spinner covering the whole page

3 Answers3