Background Color of Spinner


#1

Hello,

why the background will be not get transparent?

    let loader = this.loadingCtrl.create({spinner: 'bubbles', cssClass: 'myClass'});
    loader.present();

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


#2

To set the background color, you can target the spinner directly in the page’s scss file using:
ion-spinner {
background-color: rebeccapurple;
}

However, if you want to also change the container, then you will need to apply at higher level, as the overlay and the frame sit ‘outside’ of the page DOM node.

Use your browser’s inspection tools to see the actual DOM structure and CSS cascade to understand what your need to adjust to get your desired look.