From 27868b56e8d0e9ae8b6136c8fad0be4e7cf23175 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Fri, 2 Sep 2022 15:19:35 -0400
Subject: [PATCH] fixes #891

---
 docs/resources/changelog.md                   |  1 +
 .../progress-bar/progress-bar.styles.ts       | 20 +++++++++++++++++--
 src/components/progress-bar/progress-bar.ts   |  3 ++-
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index ace54e47..cf301164 100644
--- a/docs/resources/changelog.md
+++ b/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)
diff --git a/src/components/progress-bar/progress-bar.styles.ts b/src/components/progress-bar/progress-bar.styles.ts
index 7c4501c1..a55a8bd7 100644
--- a/src/components/progress-bar/progress-bar.styles.ts
+++ b/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%;
     }
   }
diff --git a/src/components/progress-bar/progress-bar.ts b/src/components/progress-bar/progress-bar.ts
index 0fe04185..bf8287f8 100644
--- a/src/components/progress-bar/progress-bar.ts
+++ b/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)}