Ionic LoadingController 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? i.e. 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?

Solution 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;
  }
}

Solution 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.

Solution 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;
    }
 }