Ion-spinner color


#1

How to change the ion-spinner color in ionic 2? Here is what I used in ionic 1:

ion-spinner  svg {
  width: 28px;
  height: 28px;
  stroke: yellow;
  fill: white;
}

The stroke color works but not the fill color. Any suggestion? Thanks.


#2

Try something like this.

  ion-spinner.spinner-ios line {
    stroke: blue;
  }

The css for svg has changed a bit between v1 and v2


#3

Doesn’t work for me.

Actually the stroke color works for my css. But the fill doesn’t work. For example:

ion-spinner svg {
  stroke: red;
  fill: red;
}


#4

Yes, fill will not work because the way the svg is style is different in V2.


#5

What is your suggestion to change the color of the ion-spinner? Thanks.


#6
ion-spinner * {
    stroke: blue;
  }

Should work fine


#7

This doesn’t work. Still looks the same. Only the stroke color changed.


#8

Hmm, alright, it may not work for some of the other spinners. Try this.

  ion-spinner {
    * {
      stroke: blue;
    }

    &.spinner-circles circle,
    &.spinner-bubbles circle,
    &.spinner-dots circle {
      fill: blue;
    }
  }


#9

just see the properties from dev-tools in chrome and change the stroke :smile:


#10

ion-spinner {
* {
stroke: blue !important;
}

&.spinner-circles circle,
&.spinner-bubbles circle,
&.spinner-dots circle {
  fill: blue !important;
}

}

does the trick for me.


#11

How to show spinner which is shown at splash screen in android?