代码之家 › 专栏 › 技术社区 › Sampath

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

ionic3 ionic-framework angular css html

Sampath · 技术社区 · 6 年前

loading 效果。但它显示为一个小盒子。

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

  loading.present();    

}

但我有一个任务,创建完整的页面加载程序,就像这样。

它应该是完整的页面,有一个透明的外观像上面的黑色背景。不需要波浪效应。有线索吗?

2 回复 | 直到 6 年前

Paresh Gami 6 年前

我已经这样做了,所以你可以用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%);
}

Sampath 6 年前

loading-wrapper .

.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();

用户界面: