Change spinner color dynamically


#1

Hi, I’m trying to change the spinner color without succeed

I already tried with:

1) <ion-spinner color="mycolorvariable" name="ios"></ion-spinner>
2) <ion-spinner stroke="mycolorvariable" name="ios"></ion-spinner>
3) <ion-spinner [style.stroke]="mycolorvariable" name="ios"></ion-spinner>
4) <ion-spinner [ngStyle]="{'stroke': 'mycolorvariable !important'}" name="ios"></ion-spinner>

#2

I don’t know if this will work but you can try it out.

HTML
<ion-spinner class="myspinnercolor" name="ios"></ion-spinner>

CSS

.myspinnercolor{
color: red;
//Or try this tag
background-color: red;
}

#3

thanks but, right now I have it static like in your example, but I’m trying to change it dynamically.


#4

So by that you mean you want to change the spinner by different actions or how can I understand it ? :grin:


#5

haha, No just the color of the spinner, I have a variable in my TS that contains the color that I want to set to the spinner.


#6

Im reading the Documentation here click me.

Why don’t you do it in CSS like the Doc shows ? It will change the color of your spinner like you wanted :slight_smile:.

Else if its so important for you todo it with typescript you just have to acces the CSS tag (As example document.getElementbyId();).


#7

Use the ngStyle directive.


#8

I’m going to try with @ViewChild instead of document


#9

I already tried, it’s the 4th option that I mentioned in the question


#10

What could’ve gone wrong in the solution 4 is that you set your [ngStyle] in [ ].

Judging of the Angular documentation you have to set it without.

<ion-spinner ngStyle="{'stroke': 'mycolorvariable !important'}" name="ios"></ion-spinner>

Can you try this code out to see if the color changes anyway ?

<ion-spinner ngStyle="{color: 'red'}" name="ios"></ion-spinner>

If the second solution works then your problem is your variable its either wrong set or it doesn’t know how to handle it.

Share your results! :penguin:


#11

I always use the ngDirectives with the [ ] and there is no problem, I also tried without them and your both solutions but, same result the color doesn’t change.

I also tried with:

<ion-spinner ngStyle="{stroke: 'red'}" name="ios"></ion-spinner>

#12

Hi @pisxid12, try this, may be it’ll help:

<ion-spinner [style.color]="mycolorvariable" name="ios"></ion-spinner>

OR

<ion-spinner [style.background-color]="mycolorvariable" name="ios"></ion-spinner>

And in you .ts file, make your “mycolorvariable” of string type and set its value to required color. Hope it’d help. Tell me if you find any confusion.
Cheers!!!


#13

Hmm odd, what about my CSS solution did that work ?


#14

Hey, my mistake. Upon investigation, there’s an issue with the ion-spinner object, where it wipes out the class so you can’t bind styles to it normally. However, you can use the color variable, like color="danger" gets you red. Working examples here: https://github.com/ionic-team/ionic/blob/master/src/components/spinner/test/colors/main.html


#15

I tried with:

document.getElementById("myspinner").style.stroke="red";

and
document.getElementById("myspinner").style.stroke="red";

but not success


#16

What a pity, the problem is that I don’t know what hex color the user is going to pick so, the color attribute solution doesn’t work for me.

I think I’m going to design an animated SVG :sob:


#17

Here’s a link I found when I was trying to figure this out.
http://teropa.info/blog/2016/12/12/graphics-in-angular-2.html


#18

Oh right, thanks for the info!


#19

These work when placed in app.scss
I would think you can change the color attribute as well. Is this what you were looking for?

ion-spinner {
    width: 40px !important;
    height: 40px !important;
}
ion-spinner > svg {
    width: 80px !important;
    height: 80px !important;
}
.loading-wrapper {
    height: 100%;
    width: 100%;
    padding: 0 !important;
    max-height: 100% !important;
    max-width: 100% !important;
    justify-content: center;
}

I’m wondering if previous suggestions in the thread might be effective if you pull classes from app.scss instead of your component.scss


#20

The reason why changing the stroke value on the ion-spinner doesn’t work is because the stroke colour needs to be applied to the ‘circle’ and ‘line’ elements within the ion-spinner. While you would expect these elements to inherit the style applied to the ion-spinner, these end up being overwritten by the default values. The only way to change the colour of the ‘circle’ and ‘line’ elements is to apply the style to them directly.

With CSS this can be achieved by using the asterisk, which applies the style to all the child elements of the element. I have not been able to find a way to achieve the same effect with [ngStyle]

Since I really wanted to be able to change the colour of the spinners dynamically, I used the following dirty trick:

 this.loadingCtrl.present().then(() => {
        let dynamicColor = this.dynamicColor;
        //selects all the spinners on the page
        var spinners = document.getElementsByTagName("ion-spinner");
        if (spinners.length) {
          for (var i = 0; i < spinners.length; i++) {
            // selects all the 'circle' elements within the spinner
            var circles = spinners[i].getElementsByTagName("circle");
            if (circles.length) {
              setColor(circles);
            }
            //selects all the 'line' elements within the spinner; required for the ios spinners
            var lines = spinners[i].getElementsByTagName("line")
            if (lines.length) {
              setColor(lines);
            }
            // applies the desired style to the 'line' and 'circle' elements
            function setColor(elements) {
              for (var j = 0; j < elements.length; j++) {
                elements[j].style.stroke = dynamicColor;
                elements[j].style.fill = dynamicColor;
              }
            }
          }
        } 
      }
    );

Tested with all the ionic spinners (https://ionicframework.com/docs/api/components/spinner/Spinner/) in the browser and on Android.