Ionic LoadingController 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

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

Answer 3

这对我适用于Android和iOS的Ionic 4（使用 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

// 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 5

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