fix(spinner): allow resizing of dots, bubbles, and circles

core/src/components/spinner/spinner-configs.ts

@@ -10,8 +10,8 @@ const spinners = {
       return {
         r: 5,
         style: {
-          top: `${9 * Math.sin(angle)}px`,
-          left: `${9 * Math.cos(angle)}px`,
+          top: `${32 * Math.sin(angle)}%`,
+          left: `${32 * Math.cos(angle)}%`,
           'animation-delay': animationDelay,
         },
       };
@@ -28,8 +28,8 @@ const spinners = {
       return {
         r: 5,
         style: {
-          top: `${9 * Math.sin(angle)}px`,
-          left: `${9 * Math.cos(angle)}px`,
+          top: `${32 * Math.sin(angle)}%`,
+          left: `${32 * Math.cos(angle)}%`,
           'animation-delay': animationDelay,
         },
       };
@@ -72,7 +72,7 @@ const spinners = {
       return {
         r: 6,
         style: {
-          left: `${9 - 9 * index}px`,
+          left: `${32 - 32 * index}%`,
           'animation-delay': animationDelay,
         },
       };

core/src/components/spinner/test/color/index.html

@@ -24,7 +24,6 @@
 
       <ion-content id="content">
         <ion-list>
-          <ion-item><ion-spinner slot="start"></ion-spinner>Platform Default Spinner</ion-item>
           <ion-item
             ><ion-spinner color="primary" slot="start" name="lines"></ion-spinner><code>lines</code> (primary)</ion-item
           >

core/src/components/spinner/test/color/spinner.e2e.ts

@@ -2,9 +2,9 @@ import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
 /**
- * This behavior does not vary across directions.
+ * This behavior does not vary across directions or modes.
  */
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('spinner: color'), () => {
     test.beforeEach(async ({ page }) => {
       await page.goto('/src/components/spinner/test/color', config);

core/src/components/spinner/test/resize/spinner.e2e.ts

@@ -0,0 +1,37 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * The resize behavior does not vary across directions or modes.
+ */
+configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('spinner: resize'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.setViewportSize({ width: 320, height: 340 });
+    });
+    test('should not have visual regressions', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          ion-spinner {
+            width: 100px;
+            height: 100px;
+          }
+        </style>
+        <ion-spinner name="lines"></ion-spinner>
+        <ion-spinner name="lines-small"></ion-spinner>
+        <ion-spinner name="lines-sharp"></ion-spinner>
+        <ion-spinner name="lines-sharp-small"></ion-spinner>
+        <ion-spinner name="circular"></ion-spinner>
+        <ion-spinner name="dots"></ion-spinner>
+        <ion-spinner name="bubbles"></ion-spinner>
+        <ion-spinner name="circles"></ion-spinner>
+        <ion-spinner name="crescent"></ion-spinner>
+      `,
+        config
+      );
+
+      await expect(page).toHaveScreenshot(screenshot(`spinner-resize-diff`));
+    });
+  });
+});