simplify internals and fix track width bug; fixes #1317

packages/webawesome/docs/docs/resources/changelog.md

@@ -17,6 +17,7 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 - Fixed a bug in `<wa-slider>` that caused some touch devices to end up with the incorrect value [issue:1703]
 - Fixed a bug in `<wa-card>` that prevented some slots from being detected correctly [discuss:1450]
 - Fixed a bug in `<wa-dropdown>` that caused the browser to hang when cancelling the `wa-hide` event [issue:1483]
+- Fixed a bug in `<wa-spinner>` that caused `--track-width` to not work correctly [issue:1317]
 - Improved performance of `<wa-icon>` so initial rendering occurs faster, especially with multiple icons on the page [issue:1729]
 
 ## 3.0.0

packages/webawesome/src/components/spinner/spinner.css

@@ -2,58 +2,43 @@
   --track-width: 2px;
   --track-color: var(--wa-color-neutral-fill-normal);
   --indicator-color: var(--wa-color-brand-fill-loud);
-  --speed: 2s;
+  --speed: 1s;
 
-  /* Resizing a spinner element using anything but font-size will break the animation because the animation uses em units.
-   Therefore, if a spinner is used in a flex container without `flex: none` applied, the spinner can grow/shrink and
-   break the animation. The use of `flex: none` on the host element prevents this by always having the spinner sized
-   according to its actual dimensions.
-  */
   flex: none;
   display: inline-flex;
   width: 1em;
   height: 1em;
 }
 
-svg {
+[part='base'] {
+  position: relative;
   width: 100%;
   height: 100%;
-  aspect-ratio: 1;
-  animation: spin var(--speed) linear infinite;
 }
 
 .track {
-  stroke: var(--track-color);
+  position: absolute;
+  inset: 0;
+  border: var(--track-width) solid var(--track-color);
+  border-radius: 50%;
 }
 
 .indicator {
-  stroke: var(--indicator-color);
-  stroke-dasharray: 75, 100;
-  stroke-dashoffset: -5;
-  animation: dash 1.5s ease-in-out infinite;
-  stroke-linecap: round;
+  position: absolute;
+  inset: 0;
+  border: var(--track-width) solid transparent;
+  border-top-color: var(--indicator-color);
+  border-right-color: var(--indicator-color);
+  border-radius: 50%;
+  animation: spin var(--speed) linear infinite;
 }
 
 @keyframes spin {
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(360deg);
   }
 }
-
-@keyframes dash {
-  0% {
-    stroke-dasharray: 1, 150;
-    stroke-dashoffset: 0;
-  }
-  50% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -35;
-  }
-  100% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -124;
-  }
-}

packages/webawesome/src/components/spinner/spinner.ts

@@ -11,6 +11,8 @@ import styles from './spinner.css';
  * @since 2.0
  *
  * @csspart base - The component's base wrapper.
+ * @csspart track - The spinner's track.
+ * @csspart indicator - The spinner's indicator.
  *
  * @cssproperty --track-width - The width of the track.
  * @cssproperty --track-color - The color of the track.
@@ -25,17 +27,10 @@ export default class WaSpinner extends WebAwesomeElement {
 
   render() {
     return html`
-      <svg
-        part="base"
-        role="progressbar"
-        aria-label=${this.localize.term('loading')}
-        fill="none"
-        viewBox="0 0 50 50"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <circle class="track" cx="25" cy="25" r="20" fill="none" stroke-width="5" />
-        <circle class="indicator" cx="25" cy="25" r="20" fill="none" stroke-width="5" />
-      </svg>
+      <div part="base" role="progressbar" aria-label=${this.localize.term('loading')}>
+        <div class="track" part="track"></div>
+        <div class="indicator" part="indicator"></div>
+      </div>
     `;
   }
 }