Change ion-refresher & ion-infinite-scroll color

Question

It's a "simple" request but I'm not able to achieve this result... In my app I have these two components:

<ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content 
      pullingIcon="ios-arrow-down-outline"
      pullingText="Scorri per aggiornare"
      refreshingSpinner="circles"
      refreshingText="Aggiornamento...">>
    </ion-refresher-content>
  </ion-refresher>

and

<ion-infinite-scroll [enabled]="morePagesAvailable" (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content
    loadingSpinner="bubbles"
    loadingText="Caricando più post ...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>

And they works fine with a white background. Now I need to change the background color to black but now the text of the two components it's not visible anymore because it's black by default. How can I change che color of the two components?

I tried with a CSS class but the color it's not applied. How is it possible to customize these components?

Thank you

score 0 · Answer 1 · answered Aug 23 '18 at 12:05

As docs suggest (at least for version 1 of ionic):

The ionSpinner icon to display after user lets go of the refresher. The SVG ionSpinner is now the default, replacing rotating font icons. Set to none to disable both the spinner and the icon.

Closes thing in SVG to color is fill property. so you may use it instead of color.

score -1 · Answer 2 · answered Jul 05 '20 at 19:33

Hope this helps

HTML Code

  <ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
    <ion-infinite-scroll-content class="loadingspinner"
      loadingSpinner="crescent"
      loadingText="Loading...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>

Respective CSS

.loadingspinner{
    --color : #adadad;
}

Rahul Cp · Answer 3 · 2020-12-07T12:41:19.680

-1

.spinner-crescent{
    color: #adadad;
}

edited Dec 07 '20 at 12:41

answered Dec 06 '20 at 18:19

Rahul Cp

56
4

2

While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. – Donald Duck Dec 06 '20 at 19:25
Hi @DonaldDuck, I have explained the fix in the answer. feel free to ask if any queries. I will be happy to explain :) – Rahul Cp Dec 07 '20 at 12:43

score -1 · Answer 4 · answered Mar 06 '21 at 18:12

If this helps someone. You have to add a class to the infinite scroll content or just use the tag selector.

<ion-infinite-scroll [enabled]="morePagesAvailable" (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content
        class="infinite-scroll-color"
        loadingSpinner="bubbles"
        loadingText="Caricando più post ...">
    </ion-infinite-scroll-content>
</ion-infinite-scroll>

And then change the stroke property of the tag line, to change the spinner svg color.

.infinite-scroll-color {
    line {
        stroke: #YOURCOLOR;
    }

    //If you want to change the text color too, just add this css
    .infinite-loading-text {
        color: #YOURCOLOR;
    }
}

Cheers!

Change ion-refresher & ion-infinite-scroll color

4 Answers4