bug: circular, lines-sharp, and lines-sharp-small not getting --spinner-color applied in ion-loading

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

Specifying the --spinner-color has no effect on a ‘circular’ spinner. All other spinner shapes work as expected.

Expected Behavior

Spinner color should respect defined custom color

Steps to Reproduce

In an Angular 13 project add a spinner.

I am running Angular 13.3 but if the issue is due to the naming I mentioned in additional Info below then I expect this issue is not framework specific

const loader = await this.loadingController.create({
          spinner: 'circular',
          cssClass: 'my-spinner'
        });

// CSS
.my-spinner {
  --spinner-color: red;
}

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.18.2

Utility:

cordova-res : not installed globally native-run : not installed globally

System:

NodeJS : v16.14.0 npm : 8.3.1 OS : macOS Monterey

Additional Information

Should this line not be named ‘circular’ instead of ‘circle’?

https://github.com/ionic-team/ionic-framework/blob/a6a772a38d15419ad4a60b6afeb66d91f6736934/core/src/components/spinner/spinner.scss#L122

[liamdebeasi]

There are a couple of issues here:

1. Your --spinner-color variable targets ion-spinner. --spinner-color is a CSS Variable on ion-loading, not ion-spinner. Your selector should be ion-loading instead.

2. The circular style never gets color set when used inside of ion-loading. See https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/loading/loading.scss#L70-L77.

The circular style was added in https://github.com/ionic-team/ionic-framework/commit/e33cf854a97f2c249a812bdcd55e473fe767eed6, but the author never updated ion-loading to take advantage of this.

It also looks like the lines-sharp and lines-sharp-small spinners are affected by this. We should probably just change the selector to ion-spinner instead of selecting every single variant of the spinner.

---

Ionic Team note: Whoever works on this should migrate the spinner and loading screenshot tests first.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.