fixes #633

docs/resources/changelog.md

@@ -6,6 +6,12 @@ Components with the <sl-badge variant="warning" pill>Experimental</sl-badge> bad
 
 _During the beta period, these restrictions may be relaxed in the event of a mission-critical bug._ 🐛
 
+## 2.0.0-beta.64
+
+- Added `role="status"` to `<sl-spinner>`
+- Fixed broken spinner animation in Safari [#633](https://github.com/shoelace-style/shoelace/issues/633)
+- Improved `<sl-spinner>` track color when used on various backgrounds
+
 ## 2.0.0-beta.63
 
 - 🚨 BREAKING: changed the `type` attribute to `variant` in `<sl-alert>`, `<sl-badge>`, `<sl-button>`, and `<sl-tag>` since it's more appropriate and to disambiguate from other `type` attributes

src/components/spinner/spinner.styles.ts

@@ -34,16 +34,13 @@ export default css`
   .spinner__track {
     stroke: var(--track-color);
     transform-origin: 0% 0%;
+    mix-blend-mode: multiply;
   }
 
   .spinner__indicator {
     stroke: var(--indicator-color);
     stroke-linecap: round;
-    /* stroke-dasharray: (2πr x p), (2πr) where p is the percentage to display */
-    stroke-dasharray: calc(2 * 3.141592 * calc(0.5em - var(--track-width) / 2) * 0.75),
-      calc(2 * 3.141592 * calc(0.5em - var(--track-width) / 2));
-    transform-origin: 50% 50%;
-    transform: rotate(90deg);
+    stroke-dasharray: 150% 75%;
     animation: spin var(--speed) linear infinite;
   }
 

src/components/spinner/spinner.ts

@@ -19,7 +19,7 @@ export default class SlSpinner extends LitElement {
 
   render() {
     return html`
-      <svg part="base" class="spinner" aria-busy="true" aria-live="polite">
+      <svg part="base" class="spinner" role="status">
         <circle class="spinner__track"></circle>
         <circle class="spinner__indicator"></circle>
       </svg>