Ionic-framework: ion-spinner style

[Hufschmidt]

Issue

According to the ion-spinner api-doc you should be able to change the spinner color by changing stroke style via

ion-spinner svg {
  stroke: #444;
  fill: #222;
}

But this does not work, since stroke (and fill) is defined on _classes_ of the form spinner-* (eg .spinner-ios, .spinner-dots, etc.) which take precedence over the above _type_ selector.

_Sidenote:_ The main use-case touched by this issue is changing the style/color of a single ion-spinner, not globally. Although spinners currently seem to use fixed color values in scss instead of variables, which would be another nice addition...

Tested with ionic2 beta9

Working solutions:

_Using !important_, which should be avoided as much as possible

ion-spinner svg * {
  stroke: #00f !important;
}

_Overwriting all spinner- classes_, which requires to have internal knowledge about ionic-angular

.spinner-ios line,
[...]
.spinner-crescent circle {
  stroke: #00f;
}

Desired solution:

_Overwrite by attaching custom class to ion-spinner_.

This does currently not seem to work, because <ion-spinner class="my-custom-blue"></ion-spinner> for example gets transformed into <ion-spinner _ngcontent-ykj-1="" class="spinner-crescent"></ion-spinner>, so any custom class gets dropped...

This seems like a severe bug to me. O_O

[Hufschmidt]

Additional notes:

The problem with the desired solution seems similar to the following issues #6275 (main), #6279 (dupe) and #6277 (dupe), so the same fix might apply here (and maybe on other ion components as well?).

Edit: Looking at the source-code of ion-spinner it pretty much looks like the same problem/fix applies...

[jgw96]

Hello, thanks for opening an issue with us! Would you be able to provide a plunker that demonstrates this issue? Thanks for using Ionic!

[Hufschmidt]

Added plunkr:
http://plnkr.co/edit/q7nsexm51CosPoxMt3qW?p=preview

Important code is in home.html (ion-spinner with class attribute) and the generated output (ion-spinner without custom class attribute, replaced by ionics spinner-*** class.

PS: You can remove platform:ios label (this effects all platforms), the ionitron auto-detection was a bit too eager here. :)

PPS: Also happens with ionic2 beta 10

[Hufschmidt]

I've gone through the source-code and ion-spinner seems like the only component left with this issue (_after ion-slide was fixed_), which seems to be caused by having a [class]='some-value' binding in the components decorator host setting. (_I have to admit, I have no clue what the host setting does though..._ _Ok it can set attributes (and attribute bindings) of the components own DOM element, aka host ^.^_)

132d8e977aa5e4f2078b945322c585c4eca7cf0d fixed this for ion-slides by using Renderer.setElementClass(...) from @angular/core instead. :)

[manucorporat]

@brandyscarney I agree with @Hufschmidt , last time I tried to give a spinner my own style, it was complicated. Not sure about a solution though :)

[brandyscarney]

Thanks for the issue! This will be fixed in the beta 12 release. The class will no longer be clobbered, and you will be able to pass a color via the color input. See this file for some examples: https://github.com/driftyco/ionic/blob/master/src/components/spinner/test/colors/main.html

[sertal70]

I would suggest you to update the online documentation at https://ionicframework.com/docs/api/components/spinner/Spinner/, because as per today it still reports that to change the spin color the fill and stroke properties must be used, no mention to the color property is made.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.