From 125392ce570d0b44c31504664aa2f466aa459d84 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Tue, 14 Dec 2021 13:34:06 -0500
Subject: [PATCH] simplify spinner animation

---
 docs/resources/changelog.md              |  1 +
 src/components/spinner/spinner.styles.ts | 14 +++++---------
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index d66ad2d72..4223d1974 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -12,6 +12,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - 🚨 BREAKING: removed `base` part from `<sl-divider>` to simplify the styling API
 - Fixed bug where setting `tooltipFormatter` on `<sl-range>` in JSX causes React@experimental to error out
 - Refactored `<sl-button>` to use Lit's static expressions to reduce code
+- Simplified `<sl-spinner>` animation
 
 ## 2.0.0-beta.62
 
diff --git a/src/components/spinner/spinner.styles.ts b/src/components/spinner/spinner.styles.ts
index b95c9b6e0..b33611282 100644
--- 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: 2.5s;
+    --speed: 800ms;
 
     display: inline-flex;
     width: 1em;
@@ -39,6 +39,9 @@ export default css`
   .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);
     animation: spin var(--speed) linear infinite;
@@ -46,18 +49,11 @@ export default css`
 
   @keyframes spin {
     0% {
-      stroke-dasharray: 0.2em 3em;
       transform: rotate(0deg);
     }
 
-    50% {
-      stroke-dasharray: 2.2em 3em;
-      transform: rotate(450deg);
-    }
-
     100% {
-      stroke-dasharray: 0.2em 3em;
-      transform: rotate(1080deg);
+      transform: rotate(360deg);
     }
   }
 `;