Update spinner styling and size options

docs/pages/components/spinner.md

@@ -9,12 +9,19 @@ layout: component
 
 ### Basic Spinner
 
+By default a spinner inherits its parent element's font size.
+
 ```html:preview
 <sl-spinner></sl-spinner>
+<div style="font-size: 32px;">
+  <sl-spinner></sl-spinner>
+</div>
 ```
 
 ```pug:slim
 sl-spinner
+div style="font-size: 32px;"
+  sl-spinner
 ```
 
 ```jsx:react
@@ -25,18 +32,26 @@ const App = () => <SlSpinner />;
 
 ### Size
 
-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.
+Use the `size` property to display the spinner in a pre-defined size.
+
+:::warning
+**Note:** If the pre-defined sizes don't work for your use case, you have the option to set a custom size for the spinner using the `customSize` property (also shown in the example below). Please check with the design team before using this option, so that the team can review the pattern and determine whether the existing size set should be updated.
+:::
 
 ```html:preview
-<sl-spinner></sl-spinner>
-<sl-spinner style="font-size: 2rem;"></sl-spinner>
-<sl-spinner style="font-size: 3rem;"></sl-spinner>
+<sl-spinner size="small"></sl-spinner>
+<sl-spinner size="medium"></sl-spinner>
+<sl-spinner size="large"></sl-spinner>
+<sl-spinner size="x-large"></sl-spinner>
+<sl-spinner customSize="88px"></sl-spinner>
 ```
 
 ```pug:slim
-sl-spinner
-sl-spinner style="font-size: 2rem;"
-sl-spinner style="font-size: 3rem;"
+sl-spinner size="small"
+sl-spinner size="medium"
+sl-spinner size="large"
+sl-spinner size="x-large"
+sl-spinner customSize="88px"
 ```
 
 {% raw %}
@@ -59,12 +74,16 @@ const App = () => (
 
 The width of the spinner's track can be changed by setting the `--track-width` custom property.
 
+:::warning
+**Note:** Please check with the design team before using this option, so that the team can review the pattern and determine whether the spinner's default styling should be updated.
+:::
+
 ```html:preview
-<sl-spinner style="font-size: 50px; --track-width: 10px;"></sl-spinner>
+<sl-spinner style="--track-width: 8px;" size="x-large"></sl-spinner>
 ```
 
 ```pug:slim
-sl-spinner style="font-size: 50px; --track-width: 10px;"
+sl-spinner style="--track-width: 8px;" size="x-large"
 ```
 
 {% raw %}
@@ -88,6 +107,10 @@ const App = () => (
 
 The spinner's colors can be changed by setting the `--indicator-color` and `--track-color` custom properties.
 
+:::warning
+**Note:** Please check with the design team before using this option, so that the team can review the pattern and determine whether the spinner's default styling should be updated.
+:::
+
 ```html:preview
 <sl-spinner style="font-size: 3rem; --indicator-color: deeppink; --track-color: pink;"></sl-spinner>
 ```

src/components/spinner/spinner.component.ts

@@ -1,5 +1,6 @@
 import { html } from 'lit';
 import { LocalizeController } from '../../utilities/localize.js';
+import { property } from 'lit/decorators.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import styles from './spinner.styles.js';
 import type { CSSResultGroup } from 'lit';
@@ -9,6 +10,8 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://shoelace.style/components/spinner
  * @status stable
  * @since 2.0
+ * @pattern stable
+ * @figma ready
  *
  * @csspart base - The component's base wrapper.
  *
@@ -22,11 +25,38 @@ export default class SlSpinner extends ShoelaceElement {
 
   private readonly localize = new LocalizeController(this);
 
+  /** The spinner's size. If left unset, the spinner will inherit the parent element's font size. Alternatively you can also set a custom size by passing a value to the `customSize` property. */
+  @property({ reflect: true }) size: 'small' | 'medium' | 'large' | 'x-large' | 'custom' = 'custom';
+
+  /** Can be used to set a custom size either in pixels or rems. Whenever possible, avoid using this option and stick to the pre-defined size options. */
+  @property() customSize: '';
+
   render() {
+    const svgSizes = {
+      small: '16px',
+      medium: '32px',
+      large: '48px',
+      'x-large': '64px',
+      custom: this.customSize ? this.customSize : '1em'
+    };
+
     return html`
-      <svg part="base" class="spinner" role="progressbar" aria-label=${this.localize.term('loading')}>
+      <svg
+        part="base"
+        class="spinner"
+        role="progressbar"
+        aria-label=${this.localize.term('loading')}
+        width=${svgSizes[this.size]}
+        height=${svgSizes[this.size]}
+        font-size=${svgSizes[this.size]}
+      >
         <circle class="spinner__track"></circle>
-        <circle class="spinner__indicator"></circle>
+        <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>
       </svg>
     `;
   }

src/components/spinner/spinner.styles.ts

@@ -5,14 +5,12 @@ export default css`
   ${componentStyles}
 
   :host {
-    --track-width: 2px;
-    --track-color: rgb(128 128 128 / 25%);
+    --track-width: 3.5px;
+    --track-color: var(--sl-color-primary-100);
     --indicator-color: var(--sl-color-primary-600);
-    --speed: 2s;
+    --speed: 4s;
 
     display: inline-flex;
-    width: 1em;
-    height: 1em;
   }
 
   .spinner {
@@ -37,16 +35,28 @@ export default css`
   }
 
   .spinner__indicator {
-    stroke: var(--indicator-color);
+    stroke: white;
     stroke-linecap: round;
-    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;
+  }
+
   @keyframes spin {
     0% {
       transform: rotate(0deg);
-      stroke-dasharray: 0.01em, 2.75em;
+      stroke-dasharray: 1.375em, 1.375em;
     }
 
     50% {
@@ -56,7 +66,21 @@ export default css`
 
     100% {
       transform: rotate(1080deg);
-      stroke-dasharray: 0.01em, 2.75em;
+      stroke-dasharray: 1.375em, 1.375em;
+    }
+  }
+
+  @keyframes spin-gradient {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    50% {
+      transform: rotate(180deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
     }
   }
 `;