整页而不是小盒子上的离子加载

Question

此刻，我可以使用这种简单的loading效果。但是它显示为一个小盒子。

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

  loading.present();    

}

但是我有一个创建全页加载程序的任务。

应为整页，并且背景黑色为透明外观，如上。不需要那波效应。有任何线索吗？

Answer 1

我已经知道了，所以您可以在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%);
}

Answer 2

这是我的可行解决方案。我的目标是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();

UI：