Ion-spinner color

Ionic Framework ionic-v3
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.

1 Like
2

Try something like this.

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

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

1 Like
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;
}

image

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.

1 Like
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;
    }
  }

image
Screen Shot 2016-03-18 at 10.39.25 AM.png1056Ă—212 11.8 KB

10 Likes
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.

6 Likes
11

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

1 Like