fix(loading): spinner now respects —spinner-color (#25261)

resolves #25180

core/src/components/loading/loading.scss

@@ -67,11 +67,6 @@
   z-index: $z-index-overlay-wrapper;
 }
 
-.spinner-lines,
+ion-spinner {
-.spinner-lines-small,
-.spinner-bubbles,
-.spinner-circles,
-.spinner-crescent,
-.spinner-dots {
   color: var(--spinner-color);
 }

core/src/components/loading/test/basic/index.html

@@ -56,7 +56,7 @@
         <ion-button
           id="custom-class-loading"
           expand="block"
-          onclick="openLoading({duration: 5000,message: 'Please wait...', cssClass: 'custom-class custom-loading'})"
+          onclick="openLoading({duration: 5000,message: 'Please wait...', spinner: 'lines-sharp', cssClass: 'custom-class custom-loading'})"
           >Show Loading with cssClass</ion-button
         >
         <ion-button id="backdrop-loading" expand="block" onclick="openLoading({backdropDismiss: true})"
@@ -112,15 +112,15 @@
       }
 
       .custom-loading {
-        --background: rgba(37, 210, 223, 0.8);
+        --background: rgba(255, 255, 255, 0.8);
-        --spinner-color: white;
+        --spinner-color: #ea445a;
 
         --height: 100%;
         --max-height: auto;
         --width: 100%;
         --max-width: auto;
 
-        color: white;
+        color: #3478f6;
       }
 
       f {

core/src/components/loading/test/basic/loading.e2e.ts

@@ -39,7 +39,7 @@ test.describe('loading: basic', () => {
       await runVisualTest(page, '#translucent-loading', 'translucent');
     });
     test('should open a loader with a custom class', async ({ page }) => {
-      await runVisualTest(page, '#no-spinner-loading', 'no-spinner');
+      await runVisualTest(page, '#custom-class-loading', 'custom-class');
     });
     test('should open a loader with html content', async ({ page }) => {
       await runVisualTest(page, '#html-content-loading', 'html-content');