离子加载控制器css

Question

I am using Ionic3, and have a LoadingController .

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

Question

Is it possible to remove the white background behind the the dots? ie Just have the dots over the backdrop.

As you can see from the Ionic Documentation , there is an cssClass option that can be used to do custom styling. However, I am not sure what css to apply to the LoadingController .

UPDATE

Adding the following to variables.scss :

$loading-md-background: transparent;

But how do I remove the box?

Answer 1

custom this color in your src/theme/variables.scss

available variables: 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;

to remove box-shadow on android, add one more variable:

$loading-md-box-shadow: none;

or add your class to cssClass :

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

and style:

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

UPDATE: 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's solution didn't work for me, so please see the example below for a working solution as of Ionic version 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;
    }
  }
}

Please note that I have optionally increased the stroke width of the Android loading spinner to make it slightly more visible.

Answer 3

This works for me with Ionic 4 and 5 for Android and iOS (using 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();
    }
  }
}

and then in 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