How do I load a loader over the divs in angle2

I'm trying to implement a loader on an angled project while requesting the request. but I'm not able to position it in the center of the screen overlapping the other divs ... look how it is getting, only a tip of it appears in the image and above without overlapping the content

TheloaderI'musingisthis link below is the css code and after the html of my project:

o css:

.row{
    margin-top:50px;
  }

  .img{
    margin-left: 50px;
    margin-bottom: 20px;
  }

  .inputfile {
      width: 0.1px;
      height: 0.1px;
      opacity: 0;
      overflow: hidden;
      position: absolute;
      z-index: -1;
  }
  .inputfile + label {
      font-size: 1.25em;
      font-weight: 700;
      color: white;
      background-color: black;
      display: inline-block;
  }

  .inputfile:focus + label,
  .inputfile + label:hover {
      background-color: red;
  }
  .inputfile + label {
      cursor: pointer; /* "hand" cursor */
  }
  .inputfile:focus + label {
      outline: 1px dotted #000;
      outline: -webkit-focus-ring-color auto 5px;
  }
  .inputfile + label * {
      pointer-events: none;
  }

// --------- a parte do loader é essa
#preloader {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #9370DB;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}
#loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #BA55D3;
    -webkit-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite;
}
#loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #FF00FF;
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

and the html:

<app-navbar></app-navbar>

<div id="preloader" *ngIf="loader">
        <div id="loader"></div>
      </div>


      <div><div class="container-fluid">
    <form novalidate [formGroup]="formulario" (ngSubmit)="cadastrar()">
    <div class="row">
        <div class="col-lg-4 col-md-5">
            <div class="card card-user">
                <div class="image">
                    <div *ngIf="!data.image">
                        <img [src]="nomeFoto" class="img" />
                      </div>
                      <div *ngIf="click">
                        <img-cropper #cropper [image]="data" [settings]="cropperSettings" class="img"></img-cropper>
                      </div>
                      <input type="file" name="file" id="custom-input" class="btn btn-primary" accept="image/*" (change)="fileChangeListener($event)">
                </div>
            </div>
     <div class="card">
                <div class="header">
                    <h4 class="title">Termos de Uso</h4>
                </div>
                <div class="content">

                </div>
            </div>
        </div>
    <div class="col-lg-8 col-md-7">
            <div class="card" style="padding: 30px;">
                <div class="header">
                    <h4 class="title">Cadastro</h4>
                </div>
                <div class="content">

                        <div class="row">
                            <div class="col-md-5">
                                <div class="form-group">
                                    <label>Nome</label>
                                    <input type="text" class="form-control" placeholder="Nome" formControlName="nome">
                                    <small *ngIf="!formulario.get('nome').valid && formulario.get('nome').touched" class="form-text text-danger">Campo Obrigatorio</small>
                                </div>
                            </div>
                            <div class="col-md-7">
                                <div class="form-group">
                                    <label>Sobrenome</label>
                                    <input type="text" class="form-control border-input" placeholder="Sobrenome"  formControlName="sobrenome">
                                    <small *ngIf="!formulario.get('sobrenome').valid && formulario.get('sobrenome').touched" class="form-text text-danger">Campo Obrigatorio</small>

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

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Email</label>
                                    <input type="email" class="form-control border-input" placeholder="Email" formControlName="email">
                                    <small *ngIf="!formulario.get('email').valid && formulario.get('email').touched" class="form-text text-danger">Email Invalido</small>

                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Repita o Email</label>
                                    <input type="email" class="form-control border-input" placeholder="Repita o Email" formControlName="email2">
                                    <small *ngIf="!formulario.get('email2').valid && formulario.get('email2').touched" class="form-text text-danger">Os emails nao sao iguais</small>

                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Senha</label>
                                    <input type="password" class="form-control border-input" placeholder="Senha" formControlName="senha">
                                    <small *ngIf="!formulario.get('senha').valid && formulario.get('senha').touched" class="form-text text-danger">A senha deve ter pelo menos 6 caracteres</small>

                                </div>
                            </div>
                            <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Repita a Senha</label>
                                        <input type="password" class="form-control border-input" placeholder="Repita a Senha" formControlName="senha2">
                                        <small *ngIf="!formulario.get('senha2').valid && formulario.get('senha2').touched" class="form-text text-danger">As senhas nao sao iguais</small>
                                    </div>
                                </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label>Sobre Mim</label>
                                    <textarea rows="5" class="form-control border-input" placeholder="Escreva um pouco sobre você" formControlName="sobreMim">
Oh so, your weak rhyme
You doubt I'll bother, reading into it
I'll probably won't, left to my own devices
But that's the difference in our opinions.</textarea>
                                </div>
                            </div>
                        </div>
                        <div class="text-center">
                            <button type="submit" class="btn btn-info btn-fill btn-wd"  >Cadastrar</button>
                        </div>

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

</div>

<!-- Modals -->

  <!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" #abrirModalEmailJaExiste [hidden]="true" data-target="#emailJaExisteModal">
    Launch demo modal
  </button>

  <!-- Modal -->
  <div class="modal fade" id="emailJaExisteModal" tabindex="-1" role="dialog" aria-labelledby="emailJaExisteModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="emailJaExisteModalLabel">{{tituloModal}}</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
        <p>{{mensagemModal}}</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
        </div>
      </div>
    </div>
  </div>
</div>