Merge pull request #31 from teamshares/sara-spinner-fix

Fix Spinner component bug in Safari
teamshares · Feb 21, 2024 · a4367f5 · a4367f5
2 parents 4eda25d + 711c84b
commit a4367f5
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 31 deletions.
diff --git a/docs/pages/teamshares/changelog.md b/docs/pages/teamshares/changelog.md
@@ -2,6 +2,10 @@
 
 ## 2.0.1
 
+- Fix: `sl-spinner` not rendering correctly in Safari
+
+## 2.0.1
+
 - Fix: Support for clickable links and buttons in the `summary` slot of `sl-details`.
 - Improved design for `sl-spinner`
 - Added CODEOWNERS to automatically tag reviewers

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@teamshares/shoelace",
   "description": "The Teamshares flavor of a forward-thinking library of web components.",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "upstreamVersion": "2.11.2",
   "homepage": "https://github.com/teamshares/shoelace",
   "author": "Cory LaViska",

diff --git a/src/components/spinner/spinner.component.ts b/src/components/spinner/spinner.component.ts
@@ -54,9 +54,15 @@ export default class SlSpinner extends ShoelaceElement {
         <mask id="mask">
           <circle class="spinner__indicator"></circle>
         </mask>
-        <foreignObject x="0" y="0" width="100%" height="100%" mask="url(#mask)">
-          <div class="indicator__gradient"></div>
-        </foreignObject>
+        <linearGradient id="linearColors" class="linear__gradient" x1="0" y1="0" x2="1" y2="1">
+          <stop offset="5%"></stop>
+          <stop offset="25%"></stop>
+          <stop offset="40%"></stop>
+          <stop offset="60%"></stop>
+          <stop offset="80%"></stop>
+          <stop offset="100%"></stop>
+        </linearGradient>
+        <circle class="indicator__gradient" stroke="url(#linearColors)" mask="url(#mask)"></circle>
       </svg>
     `;
   }

diff --git a/src/components/spinner/spinner.styles.ts b/src/components/spinner/spinner.styles.ts
@@ -15,18 +15,16 @@ export default css`
 
   .spinner {
     flex: 1 1 auto;
-    height: 100%;
-    width: 100%;
   }
 
   .spinner__track,
-  .spinner__indicator {
+  .spinner__indicator,
+  .indicator__gradient {
     fill: none;
     stroke-width: var(--track-width);
     r: calc(0.5em - var(--track-width) / 2);
     cx: 0.5em;
     cy: 0.5em;
-    transform-origin: 50% 50%;
   }
 
   .spinner__track {
@@ -37,20 +35,41 @@ export default css`
   .spinner__indicator {
     stroke: white;
     stroke-linecap: round;
+    transform-origin: 50% 50%;
+    stroke-dasharray: 150% 75%;
     animation: spin var(--speed) linear infinite;
   }
 
   .indicator__gradient {
-    background: conic-gradient(
-      from 270deg,
-      var(--indicator-color) 5%,
-      var(--track-color) 35% 60%,
-      var(--indicator-color) 95%
-    );
-    width: 100%;
-    height: 100%;
     transform-origin: 50% 50%;
-    animation: spin-gradient var(--speed) linear infinite;
+  }
+
+  .linear__gradient stop:nth-child(1) {
+    stop-color: var(--sl-color-neutral-0);
+  }
+
+  .linear__gradient stop:nth-child(2) {
+    stop-color: var(--track-color);
+    stop-opacity: 25%;
+  }
+
+  .linear__gradient stop:nth-child(3) {
+    stop-color: var(--indicator-color);
+    stop-opacity: 40%;
+  }
+
+  .linear__gradient stop:nth-child(4) {
+    stop-color: var(--indicator-color);
+    stop-opacity: 60%;
+  }
+
+  .linear__gradient stop:nth-child(5) {
+    stop-color: var(--indicator-color);
+    stop-opacity: 90%;
+  }
+
+  .linear__gradient stop:nth-child(6) {
+    stop-color: var(--indicator-color);
   }
 
   @keyframes spin {
@@ -69,18 +88,4 @@ export default css`
       stroke-dasharray: 1.375em, 1.375em;
     }
   }
-
-  @keyframes spin-gradient {
-    0% {
-      transform: rotate(0deg);
-    }
-
-    50% {
-      transform: rotate(180deg);
-    }
-
-    100% {
-      transform: rotate(360deg);
-    }
-  }
 `;