From b21a807ef76be71df94078931f19cd192008d371 Mon Sep 17 00:00:00 2001
From: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
Date: Thu, 4 Jul 2024 17:17:04 +0300
Subject: [PATCH] ProgressBar: Fix indeterminate RTL support (#63129)

* ProgressBar: Fix indeterminate RTL support

* CHANGELOG

Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
---
 packages/components/CHANGELOG.md              |  1 +
 .../components/src/progress-bar/styles.ts     | 27 ++++++++++++-------
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 9341104dda97e..83b59bf45074b 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -14,6 +14,7 @@
 -   `ToolbarButton`: Deprecate `isDisabled` prop and merge with `disabled` ([#63101](https://github.com/WordPress/gutenberg/pull/63101)).
 -   `Button`: Stabilize `__experimentalIsFocusable` prop as `accessibleWhenDisabled` ([#62282](https://github.com/WordPress/gutenberg/pull/62282)).
 -   `ToolbarButton`: Always keep focusable when disabled ([#63102](https://github.com/WordPress/gutenberg/pull/63102)).
+-   `ProgressBar`: Fix indeterminate RTL support. ([#63129](https://github.com/WordPress/gutenberg/pull/63129)).
 
 ### Internal
 
diff --git a/packages/components/src/progress-bar/styles.ts b/packages/components/src/progress-bar/styles.ts
index 0e91556b96b9d..79b9103e73a1e 100644
--- a/packages/components/src/progress-bar/styles.ts
+++ b/packages/components/src/progress-bar/styles.ts
@@ -4,19 +4,28 @@
 import styled from '@emotion/styled';
 import { css, keyframes } from '@emotion/react';
 
+/**
+ * WordPress dependencies
+ */
+import { isRTL } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
 import { COLORS, CONFIG } from '../utils';
 
-const animateProgressBar = keyframes( {
-	'0%': {
-		left: '-50%',
-	},
-	'100%': {
-		left: '100%',
-	},
-} );
+function animateProgressBar( isRtl = false ) {
+	const animationDirection = isRtl ? 'right' : 'left';
+
+	return keyframes( {
+		'0%': {
+			[ animationDirection ]: '-50%',
+		},
+		'100%': {
+			[ animationDirection ]: '100%',
+		},
+	} );
+}
 
 // Width of the indicator for the indeterminate progress bar
 export const INDETERMINATE_TRACK_WIDTH = 50;
@@ -67,7 +76,7 @@ export const Indicator = styled.div< {
 					animationDuration: '1.5s',
 					animationTimingFunction: 'ease-in-out',
 					animationIterationCount: 'infinite',
-					animationName: animateProgressBar,
+					animationName: animateProgressBar( isRTL() ),
 					width: `${ INDETERMINATE_TRACK_WIDTH }%`,
 			  } )
 			: css( {