fixes #891

docs/resources/changelog.md

@@ -17,6 +17,7 @@ This release removes the `<sl-responsive-media>` component. When this component
 - Added `sl-lazy-change` event to `<sl-tree-item>`
 - Fixed a bug in `<sl-popup>` that didn't account for the arrow's diagonal size
 - Fixed a bug in `<sl-popup>` that caused arrow placement to be incorrect with RTL
+- Fixed a bug in `<sl-progress-ring>` that caused the indeterminate animation to stop working in Safari [#891](https://github.com/shoelace-style/shoelace/issues/891)
 - Fixed a bug in `<sl-tree-item>` that prevented custom expand/collapse icons from rendering
 - Fixed a bug in `<sl-tree-item>` where the `expand-icon` and `collapse-icon` slots were reversed
 - Fixed a bug in `<sl-tree-item>` that prevented the keyboard from working after lazy loading [#882](https://github.com/shoelace-style/shoelace/issues/882)

src/components/progress-bar/progress-bar.styles.ts

@@ -43,14 +43,30 @@ export default css`
     animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);
   }
 
+  .progress-bar--indeterminate.progress-bar--rtl .progress-bar__indicator {
+    animation-name: indeterminate-rtl;
+  }
+
   @keyframes indeterminate {
     0% {
-      inset-inline-start: -50%;
+      left: -50%;
       width: 50%;
     }
     75%,
     100% {
-      inset-inline-start: 100%;
+      left: 100%;
+      width: 50%;
+    }
+  }
+
+  @keyframes indeterminate-rtl {
+    0% {
+      right: -50%;
+      width: 50%;
+    }
+    75%,
+    100% {
+      right: 100%;
       width: 50%;
     }
   }

src/components/progress-bar/progress-bar.ts

@@ -43,7 +43,8 @@ export default class SlProgressBar extends ShoelaceElement {
         part="base"
         class=${classMap({
           'progress-bar': true,
-          'progress-bar--indeterminate': this.indeterminate
+          'progress-bar--indeterminate': this.indeterminate,
+          'progress-bar--rtl': this.localize.dir() === 'rtl'
         })}
         role="progressbar"
         title=${ifDefined(this.title)}