Can't style Loading widget

Ionic Framework ionic-v3
1

No matter what I do I can’t get any styles to apply to the ionic 2 Loading.create() widget.

let loading = Loading.create({
      content: "
      <div class='custom-spinner-container'>
        <div class='custom-spinner-box'></div>
      </div>",
      cssClass: "myStyleSpinner"
    });

    this.nav.present(loading);

.myStyleSpinner {
  width: 128px;
  height: 128px;
  font-size:128px;
  stroke: red;
  fill: red;
  margin-left:100px;
}

I have also tried applying the same style to the custom-spinner-container and the custom-spinner-box and to ion-spinner svg but still no joy.

2

Hi @vardas,

Did you solve it?

3

Use SASS Variables :wink:
In your theme/variables.scss

$loading-md-spinner-color: #f53d3d; // this is for android
$loading-ios-spinner-ios-color: #f53d3d; // this is for ios
$loading-wp-spinner-ios-color: #f53d3d; // this is for windown phone

You can style all sort of things related to the loading like this.
Check the official documentation for all the available options : http://ionicframework.com/docs/v2/api/components/loading/LoadingController/#sass-variables