Color the spinner with ion-infinite-scroll?


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?



Howdy to you, @hanamj!

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

Check this out:

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

I hope this helps!


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)



1 Like

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;