離子加載控制器css

Question

我正在使用 Ionic3，並且有一個LoadingController 。

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

題

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

正如您從Ionic 文檔中看到的，有一個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'
});

和風格：

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

更新：離子 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 2

Tiep Phan 的解決方案對我不起作用，因此請參閱下面的示例以了解 Ionic 版本 3.19.0 的工作解決方案：

app.component.ts

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

應用程序.scss

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

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

請注意，我有選擇地增加了 Android 加載微調器的筆觸寬度，以使其更加明顯。

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

// 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'));
  }
}

加載Service.service.ts