Ionic LoadingController css

Question

我正在使用Ionic3,并且有一个LoadingController.

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

题

是否可以去除点后面的白色背景？即只是在背景上有点.

从Ionic Documentation可以看到,有一个cssClass选项可用于自定义样式.但是,我不确定应用什么css LoadingController.

UPDATE

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

$loading-md-background: transparent;

但是如何取出盒子？

Answer 1

在你的自定义这种颜色 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;
  }
}

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

IONIC 2

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

Answer 2

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加载微调器的笔触宽度,使其更加明显.