restore spinner animation

shoelace-style · Jan 20, 2022 · e08236e · e08236e
1 parent 27b5e3d
commit e08236e
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/docs/components/spinner.md b/docs/components/spinner.md
@@ -45,7 +45,7 @@ const App = () => (
 The width of the spinner's track can be changed by setting the `--track-width` custom property.
 
 ```html preview
-<sl-spinner style="font-size: 3rem; --track-width: 6px;"></sl-spinner>
+<sl-spinner style="font-size: 50px; --track-width: 10px;"></sl-spinner>
 ```
 
 ```jsx react

diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
@@ -9,6 +9,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 ## Next
 
 - Implemented stricter linting to improve consistency and reduce errors, which resulted in many small refactors throughout the codebase [#647](https://github.com/shoelace-style/shoelace/pull/647)
+- Restored the nicer animation on `<sl-spinner>` and verified it works in Safari
 - Updated minimum Node version to 14.17
 
 ## 2.0.0-beta.64

diff --git a/src/components/spinner/spinner.styles.ts b/src/components/spinner/spinner.styles.ts
@@ -8,7 +8,7 @@ export default css`
     --track-width: 2px;
     --track-color: rgb(128 128 128 / 25%);
     --indicator-color: var(--sl-color-primary-600);
-    --speed: 800ms;
+    --speed: 2s;
 
     display: inline-flex;
     width: 1em;
@@ -47,10 +47,17 @@ export default css`
   @keyframes spin {
     0% {
       transform: rotate(0deg);
+      stroke-dasharray: 0.01em, 2.75em;
+    }
+
+    50% {
+      transform: rotate(450deg);
+      stroke-dasharray: 1.375em, 1.375em;
     }
 
     100% {
-      transform: rotate(360deg);
+      transform: rotate(1080deg);
+      stroke-dasharray: 0.01em, 2.75em;
     }
   }
 `;