Ionic customize color of ionic refresher spinner icon

Issue

How can I customize the the styles of ionic refresher spinner icon for every page? In each page on my app the spinner should have different color depending where page the user is on. I have done something like this in my css. But I only customized the background color of the refresher to gray.

Here is the styles.css

ion-refresher * {
    // background-color: white;
    ion-refresher-content * {
      icon * {
        color: #dd2727;
      }
      color: red;
        .refresher-refreshing {
          .refresher-pulling-icon, .refresher-refreshing-icon {
            text-align: center;
            -webkit-transform-origin: center;
            transform-origin: center;
            font-size: 30px;
            color: #dd2727;
            -webkit-transition: 200ms;
            transition: 200ms;
          }
        }
    }
  }

Here is the page.html

<ion-refresher (ionRefresh)="doRefresh($event)">
      <ion-refresher-content
        pullingIcon="arrow-dropdown"
        refreshingSpinner="crescent">
      </ion-refresher-content>
    </ion-refresher>

I tried googling for it but can't find any solutions.

Appreciate if someone could help. Thanks in advance.

Solution

You can check refresher component on ionic documentation https://ionicframework.com/docs/api/components/refresher/Refresher/

They have specified sass variables in the bottom to change styling as per our needs:

$refresher-icon-color
$refresher-icon-font-size
$refresher-text-color
$refresher-text-font-size
$refresher-border-color

So say you want to use $refresher-icon-color: red; in your app you can call this variable in theme/variable.scss which will override the default styles.

Css

Circle svg

.refresher-refreshing .spinner-crescent circle, .refresher-refreshing .spinner-ios line, .refresher-refreshing .spinner-ios-small line{
   stroke : red;
}

Pulling icon css

.refresher-pulling-icon, .refresher-refreshing-icon{
  color: red
}

Every page in ionic has the page-name format so you can add your working styles in individual page scss file and if you want to change color of spinner icon then its an svg you can use above css in page scss file itself.

Like this:

page-spinner{
    .refresher-refreshing .spinner-crescent circle, .refresher-refreshing .spinner-ios line, .refresher-refreshing .spinner-ios-small line{
       stroke : red;
    }
}

Answered By - Ajaj Rajguru