离子加载控制器 css

Question

我正在使用 Ionic3，并且有一个 LoadingController。

this.loading = this.loadingCtrl.create({
  content: '',
  spinner: 'dots'
});

问题

是否可以去除点后面的白色背景？即，只需将点放在背景上即可。

从Ionic Documentation 中可以看出，有一个cssClass 选项可用于自定义样式。但是，我不确定将什么 css 应用于 LoadingController。

更新

将以下内容添加到variables.scss：

$loading-md-background: transparent;

但是我该如何移除盒子呢？

Answer 1

import { Injectable } from '@angular/core';
import { LoadingController } from '@ionic/angular';

@Injectable({
  providedIn: 'root'
})
export class LoadingService {

  constructor(public loadingController: LoadingController) { }

  isLoading: boolean = false;
  async present() {
    this.isLoading = true;
    return await this.loadingController.create({
      spinner: null,
      duration: 5000,
      message: '<ion-img src="assets/images/loader-banorte.gif" ></ion-img>',
      translucent: false,
      cssClass: 'banorte-loading',
      showBackdrop: true,
      mode: 'md',
      keyboardClose: false,
      backdropDismiss: true
    }).then(a => {
      a.present().then(() => {
        console.log('presented');
        if (!this.isLoading) {
          a.dismiss().then(() => console.log('abort presenting'));
        }
      });
    });
  }

  async dismiss() {
    this.isLoading = false;
    return await this.loadingController.dismiss().then(() => console.log('dismissed'));
  }
}

LoadingService.service.ts

Answer 2

// this how to apply custom style or replace the loading icon with your desired one 

//.ts
 this.loading = this.loadingCtrl.create({
         spinner: 'hide',
      cssClass: 'custom-spinner',
      // message:"hello",
      content: `
        <div class="custom-spinner-container">
          <div class="custom-spinner-box">
             <img src="assets/img/LOADING-.gif" style="max-width: 100%;
             width: 140px !important;"/>
          </div>
        </div>`,
      // duration:
})


//app.css
.custom-spinner {
 .loading-wrapper{
        background: transparent !important;
        box-shadow: unset !important;

    }
}

Answer 3

这对我适用于 Android 和 iOS 的 Ionic 4 和 5（使用 mode:'md'）：

import { Injectable } from '@angular/core';
import { LoadingController } from '@ionic/angular';
import { LoadingOptions } from '@ionic/core';

@Injectable({
  providedIn: 'root'
})
export class LoadingService {

  constructor(public loadingController: LoadingController) { }

  async present() {
// Dismiss all pending loaders before creating the new one
await this.dismiss();

let options: LoadingOptions = {
  message: '<ion-img src="/assets/imgs/spinner.svg" alt="loading..."></ion-img>',
  cssClass: 'custom-loading',
  translucent: true,
  showBackdrop: true,
  spinner: null,
  mode: 'md',
  keyboardClose: true
};

await this.loadingController  
  .create(options)
  .then(res => {
    res.present();
  });
}

  /**
   * Dismiss all the pending loaders, if any
   */
  async dismiss() {
    while (await this.loadingController.getTop() !== undefined) {
      await this.loadingController.dismiss();
    }
  }
}

然后在 global.scss 中：

.custom-loading {
    --background: none;
   
    .loading-wrapper{
        box-shadow: none !important;
        -webkit-box-shadow: !important;
    }
 }

Answer 4

在您的 src/theme/variables.scss 中自定义此颜色

可用变量：https://ionicframework.com/docs/api/components/loading/LoadingController/#sass-variables

$loading-ios-background: transparent;
$loading-md-background: $loading-ios-background;
$loading-wp-background: $loading-ios-background;

要在 android 上移除 box-shadow，再添加一个变量：

$loading-md-box-shadow: none;

或将您的班级添加到cssClass：

this.loading = this.loadingCtrl.create({
  content: '',
  spinner: 'dots',
  cssClass: 'my-loading-class'
});

和风格：

=============================

更新：IONIC 3

ion-loading.my-loading-class {
  .loading-wrapper {
    background: transparent;
    box-shadow: none;
  }
}

=============================

离子 2

.loading-ios,
.loading-md,
.loading-wp {
  .my-loading-class {
    background-color: transparent;
    box-shadow: none;
  }
}

Answer 5

Tiep Phan 的解决方案对我不起作用，因此请参阅下面的示例，了解 Ionic 版本 3.19.0 的有效解决方案：

app.component.ts

const LOADING = this.loadingCtrl.create({
  cssClass: 'transparent',
});

app.scss

ion-loading.transparent {
  .loading-wrapper {
    background: transparent;
    box-shadow: none;

    .spinner-crescent circle {
      stroke-width: 8px;
    }
  }
}

请注意，我有选择地增加了 Android 加载微调器的笔画宽度，使其更加明显。