Color the spinner with ion-infinite-scroll?

ionic-v1
1

Howdy!

With a simple ion-infinite-scroll

<ion-infinite-scroll distance="2" on-infinite="loadSomeData()" ng-if="theresMoreData"></ion-infinite-scroll>

is it possible to adjust the color of the SVG ion-spinner contained within?

Thanks!

John

2

Howdy to you, @hanamj!

Yes, it is possible to style the SVG ion-spinner using CSS - via fill and stroke.

Check this out: http://ionicframework.com/docs/api/directive/ionSpinner/

You’ll want to check out the ‘Spinner Colors’ and ‘Styling SVG with CSS’ sections I believe…

I hope this helps!

-Matt

3

Right, good call. I suppose I was hoping for a some class="infinite-spinner-assertive" magic that I just missed in the docs.

Solved by changing to:

<ion-infinite-scroll class="ispinner" ... ... ></ion-infinite-scroll>

And adding:

.ispinner .spinner {
    stroke: #ef473a;
    fill: #ef473a;
}

(to match spinner-assertive)

Thanks,

John

1 Like
4

Thanks, I was also looking for something like infinite-spinner-assertive and thought I’d miss something in the docs. I did something similar by making my own, but used $assertive since there is a Sass variable with the colours available.

.infinite-spinner-assertive .spinner {
  stroke: $assertive;
  fill: $assertive;
}