fix animation bug

docs/components/progress-ring.md

@@ -12,10 +12,10 @@ Progress rings are used to show the progress of a determinate operation in a cir
 
 ### Size
 
-Use the `size` attribute to set the diameter of the progress ring.
+Use the `--size` custom property to set the diameter of the progress ring.
 
 ```html preview
-<sl-progress-ring percentage="50" size="200"></sl-progress-ring>
+<sl-progress-ring percentage="50" style="--size: 200px;"></sl-progress-ring>
 ```
 
 ### Track Width
@@ -45,7 +45,7 @@ To change the color, use the `--track-color` and `--indicator-color` custom prop
 Use the default slot to show a label.
 
 ```html preview
-<sl-progress-ring percentage="50" size="200" class="progress-ring-labels" style="margin-bottom: .5rem;">50%</sl-progress-ring>
+<sl-progress-ring percentage="50" class="progress-ring-labels" style="margin-bottom: .5rem;">50%</sl-progress-ring>
 
 <br>
 

docs/resources/changelog.md

@@ -21,6 +21,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Added the undocumented custom properties `--thumb-size`, `--tooltip-offset`, `--track-height` on `<sl-range>`
 - Changed the default `distance` in `<sl-dropdown>` from `2` to `0` [#538](https://github.com/shoelace-style/shoelace/issues/538)
 - Fixed a bug where `<sl-select>` would be larger than the viewport when it had lots of options [#544](https://github.com/shoelace-style/shoelace/issues/544)
+- Fixed a bug where `<sl-progress-ring>` wouldn't animate in Safari
 - Updated the default height of `<sl-progress-bar>` from `16px` to `1rem` and added a subtle shadow to indicate depth
 - Removed the `lit-html` dependency and moved corresponding imports to `lit` [#546](https://github.com/shoelace-style/shoelace/issues/546)
 

src/components/progress-ring/progress-ring.ts

@@ -1,5 +1,5 @@
 import { LitElement, html } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
 import styles from './progress-ring.styles';
 
 /**
@@ -22,9 +22,28 @@ export default class SlProgressRing extends LitElement {
 
   @query('.progress-ring__indicator') indicator: SVGCircleElement;
 
+  @state() indicatorOffset: string;
+
   /** The current progress percentage, 0 - 100. */
   @property({ type: Number, reflect: true }) percentage: number;
 
+  updated(changedProps: Map<string, any>) {
+    super.updated(changedProps);
+
+    //
+    // This block is only required for Safari because it doesn't transition the circle when the custom properties
+    // change, possibly because of a mix of pixel + unitless values in the calc() function. It seems like a Safari bug,
+    // but I couldn't pinpoint it so this works around the problem.
+    //
+    if (changedProps.has('percentage')) {
+      const radius = parseFloat(getComputedStyle(this.indicator).getPropertyValue('r'));
+      const circumference = 2 * Math.PI * radius;
+      const offset = circumference - (this.percentage / 100) * circumference;
+
+      this.indicatorOffset = String(offset) + 'px';
+    }
+  }
+
   render() {
     return html`
       <div
@@ -34,10 +53,11 @@ export default class SlProgressRing extends LitElement {
         aria-valuemin="0"
         aria-valuemax="100"
         aria-valuenow="${this.percentage}"
+        style="--percentage: ${this.percentage / 100}"
       >
         <svg class="progress-ring__image">
           <circle class="progress-ring__track"></circle>
-          <circle class="progress-ring__indicator" style="--percentage: ${this.percentage / 100};"></circle>
+          <circle class="progress-ring__indicator" style="stroke-dashoffset: ${this.indicatorOffset}"></circle>
         </svg>
 
         <span part="label" class="progress-ring__label">