diff --git a/core/src/components/loading/loading.scss b/core/src/components/loading/loading.scss
index bb5d42de5b..619e9f50b5 100644
--- a/core/src/components/loading/loading.scss
+++ b/core/src/components/loading/loading.scss
@@ -67,11 +67,6 @@
   z-index: $z-index-overlay-wrapper;
 }
 
-.spinner-lines,
-.spinner-lines-small,
-.spinner-bubbles,
-.spinner-circles,
-.spinner-crescent,
-.spinner-dots {
+ion-spinner {
   color: var(--spinner-color);
 }
diff --git a/core/src/components/loading/test/basic/index.html b/core/src/components/loading/test/basic/index.html
index 54623383f7..40ffdefe41 100644
--- a/core/src/components/loading/test/basic/index.html
+++ b/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);
-        --spinner-color: white;
+        --background: rgba(255, 255, 255, 0.8);
+        --spinner-color: #ea445a;
 
         --height: 100%;
         --max-height: auto;
         --width: 100%;
         --max-width: auto;
 
-        color: white;
+        color: #3478f6;
       }
 
       f {
diff --git a/core/src/components/loading/test/basic/loading.e2e.ts b/core/src/components/loading/test/basic/loading.e2e.ts
index c022b00423..08af2d8f57 100644
--- a/core/src/components/loading/test/basic/loading.e2e.ts
+++ b/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');
diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..d0cdc38469
Binary files /dev/null and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..5c9620dec9
Binary files /dev/null and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..4c563a3cf4
Binary files /dev/null and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..5db2b66fb9
Binary files /dev/null and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..09c3b8cf3e
Binary files /dev/null and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..bcc1559c59
Binary files /dev/null and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..6af72178c2
Binary files /dev/null and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..923f281ade
Binary files /dev/null and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..d3595b015a
Binary files /dev/null and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..d3f714deb7
Binary files /dev/null and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..13af4188f5
Binary files /dev/null and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..4f8dcbb2a0
Binary files /dev/null and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-md-rtl-Mobile-Safari-linux.png differ