An Ionic template to build full screen loading, using native LoadingController

ionic-full-screen-loading-teplate.scss

.background {
  background-image: url('../../assets/<your_bg>.png');
  background-size: cover;
}

.text-loading {
  margin: auto;
  padding-top: 5rem;
  padding-left: 6rem;
  padding-right: 6rem;
}

.icon-loading {
  margin: auto;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  width: 15rem !important;
  height: 15rem !important;
  margin-top: 14rem !important;
}

/** TIP: check this gist to guarantee responsivity: 
https://gist.github.com/JGeraldoLima/e1b021a03a89a45c6b03c8edebc047e3
**/
.ic-loading {
  background-image: url("../assets/<your_loading_image>.png");
}

.my-loading {
  @extend .background;

  ion-backdrop {
    height: 100%;
    width: 100%;
    background-color: transparent !important;
  }

  .loading-wrapper, .loading-content {
    padding: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    color: transparent !important;
    background: transparent !important;
  }

  .ic-loading {
    -webkit-animation:spin 8s linear infinite;
    -moz-animation:spin 8s linear infinite;
    animation:spin 8s linear infinite;
  }

  @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
  @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
  @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

  .text-loading {
    justify-content: center !important;

    span {
      word-break: break-word !important;
      text-align: center !important;
    }
  }
}

/************ .ts use
let loading = this.loadingCtrl.create({
  spinner: 'hide',
  content: `
    <div class="icon-loading ic-loading"></div>
    <div class="row text-loading">
      <span>Loading...</span>
    </div>`,
  cssClass: "my-loading",
  duration: 3000
});

loading.present();
************/

Credits to this stackoverflow answer