improve spinner animation and API

docs/components/spinner.md

@@ -12,28 +12,28 @@ Spinners are used to show the progress of an indeterminate operation.
 
 ### Size
 
-Spinners are sized relative to the current font size. To change their size, set the `font-size` property on the spinner itself or on a parent element as shown below.
+Spinners are sized based on the current font size. To change their size, set the `font-size` property on the spinner itself or on a parent element as shown below.
 
 ```html preview
 <sl-spinner></sl-spinner>
 <sl-spinner style="font-size: 2rem;"></sl-spinner>
 <sl-spinner style="font-size: 3rem;"></sl-spinner>
 ```
 
-### Stroke Width
+### Track Width
 
-The width of the spinner can be changed by setting the `--stroke-width` custom property.
+The width of the spinner's track can be changed by setting the `--track-width` custom property.
 
 ```html preview
-<sl-spinner style="font-size: 2rem; --stroke-width: 6px;"></sl-spinner>
+<sl-spinner style="font-size: 3rem; --track-width: 6px;"></sl-spinner>
 ```
 
 ### Color
 
 The spinner's colors can be changed by setting the `--indicator-color` and `--track-color` custom properties.
 
 ```html preview
-<sl-spinner style="font-size: 2rem; --indicator-color: tomato;"></sl-spinner>
+<sl-spinner style="font-size: 3rem; --indicator-color: deeppink; --track-color: pink;"></sl-spinner>
 ```
 
 [component-metadata:sl-spinner]

docs/resources/changelog.md

@@ -8,7 +8,10 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 ## Next
 
+- 🚨 BREAKING: removed `--stroke-width` from `<sl-spinner>` (use `--track-width` instead)
+- Added `--speed` CSS custom property to `<sl-spinner>`
 - Fixed a bug where `<sl-tab>` wasn't using a border radius token [#523](https://github.com/shoelace-style/shoelace/issues/523)
+- Updated `<sl-spinner>` to use an SVG and improved the indicator animation
 
 ## 2.0.0-beta.51
 

src/components/spinner/spinner.styles.ts

@@ -5,9 +5,10 @@ export default css`
   ${componentStyles}
 
   :host {
+    --track-width: 2px;
     --track-color: rgb(var(--sl-color-neutral-500) / 20%);
     --indicator-color: rgb(var(--sl-color-primary-600));
-    --stroke-width: 2px;
+    --speed: 2.5s;
 
     display: inline-flex;
     width: 1em;
@@ -16,19 +17,47 @@ export default css`
 
   .spinner {
     flex: 1 1 auto;
-    border-radius: 50%;
-    border: solid var(--stroke-width) var(--track-color);
-    border-top-color: var(--indicator-color);
-    border-right-color: var(--indicator-color);
-    animation: 1s linear infinite spin;
+    height: 100%;
+    width: 100%;
+  }
+
+  .spinner__track,
+  .spinner__indicator {
+    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 {
+    stroke: var(--track-color);
+    transform-origin: 0% 0%;
+  }
+
+  .spinner__indicator {
+    stroke: var(--indicator-color);
+    stroke-linecap: round;
+    transform-origin: 50% 50%;
+    transform: rotate(90deg);
+    animation: spin var(--speed) linear infinite;
   }
 
   @keyframes spin {
     0% {
+      stroke-dasharray: 0.2em 3em;
       transform: rotate(0deg);
     }
+
+    50% {
+      stroke-dasharray: 2.2em 3em;
+      transform: rotate(450deg);
+    }
+
     100% {
-      transform: rotate(360deg);
+      stroke-dasharray: 0.2em 3em;
+      transform: rotate(1080deg);
     }
   }
 `;

src/components/spinner/spinner.ts

@@ -8,16 +8,22 @@ import styles from './spinner.styles';
  *
  * @csspart base - The component's base wrapper.
  *
+ * @cssproperty --track-width - The width of the indicator.
  * @cssproperty --track-color - The color of the spinner's track.
  * @cssproperty --indicator-color - The color of the spinner's indicator.
- * @cssproperty --stroke-width - The width of the indicator.
+ * @cssproperty --speed - The time it takes for the spinner to complete one animation cycle.
  */
 @customElement('sl-spinner')
 export default class SlSpinner extends LitElement {
   static styles = styles;
 
   render() {
-    return html` <span part="base" class="spinner" aria-busy="true" aria-live="polite"></span> `;
+    return html`
+      <svg part="base" class="spinner" aria-busy="true" aria-live="polite">
+        <circle class="spinner__track"></circle>
+        <circle class="spinner__indicator"></circle>
+      </svg>
+    `;
   }
 }