html - 整页 ionic 加载而不是小框

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