Ионная загрузка на полную страницу вместо маленькой коробки

Question

В данный момент я могу использовать этот простой загрузочный эффект.Но это видно как маленькая коробочка.

presentLoadingText() {
  let loading = this.loadingCtrl.create({
     content: 'Loading Please Wait...'
  });

  loading.present();    

}

Но у меня есть задача создать загрузчик полной страницы следующим образом.

Это должна быть полная страница ииметь черный фон с прозрачным внешним видом, как указано выше.Не нужен этот волновой эффект.Любая подсказка?

Answer 1

Это рабочее решение для меня.Я настроил таргетинг loading-wrapper.

app.scss

.loading-wrapper {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    min-width: 100% !important;
    max-height: 100% !important;
    background-color: rgba(0, 0, 0, 0.8) !important;
}

.ts

 let loader = this.loadingCtrl.create({
      content:
        `<div class="custom-spinner-container">
        Please wait...
      </div>`,
    });
    loader.present();

Пользовательский интерфейс:

Answer 2

У меня уже есть, так что вы можете сделать это с помощью CSS.

html

this.loading = this.loadingCtrl.create({
    spinner: 'spinner',
    content: `
    <div class="login_view">
        <div class="loader_view">
            <div class="cst_loader"></div>
        </div>
    </div>`,
    showBackdrop: showBackdrop
});
this.loading.present();

ts

.login_view{
    background: url(../../assets/imgs/login_bg.png) no-repeat 100% 100%;
    background-size: contain;
}
.loader_view{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}