Angular 7 - ngx-spinner covering the whole page - css

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>

Answer 1

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>

Answer 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>

Answer 3

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