From c2dbd577d3899518903e9d45975c98339a15f611 Mon Sep 17 00:00:00 2001
From: Cee Chen <549407+cee-chen@users.noreply.github.com>
Date: Wed, 21 Feb 2024 08:56:23 -0800
Subject: [PATCH] [EuiProgress] Fix broken transition CSS (#7538)

---
 changelogs/upcoming/7538.md                |  3 +++
 src/components/progress/progress.styles.ts | 11 ++++++++---
 2 files changed, 11 insertions(+), 3 deletions(-)
 create mode 100644 changelogs/upcoming/7538.md

diff --git a/changelogs/upcoming/7538.md b/changelogs/upcoming/7538.md
new file mode 100644
index 00000000000..fb97e0dabe8
--- /dev/null
+++ b/changelogs/upcoming/7538.md
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed missing animation on native `EuiProgress` bar update
diff --git a/src/components/progress/progress.styles.ts b/src/components/progress/progress.styles.ts
index 1e2b4f624bb..8e073ffca89 100644
--- a/src/components/progress/progress.styles.ts
+++ b/src/components/progress/progress.styles.ts
@@ -10,6 +10,7 @@ import { css, keyframes } from '@emotion/react';
 import {
   logicalCSS,
   logicalTextAlignCSS,
+  euiCanAnimate,
   euiCantAnimate,
   euiFontSize,
   euiTextTruncate,
@@ -105,9 +106,13 @@ export const euiProgressStyles = (
       background-color: ${euiTheme.colors.lightShade};
     }
 
-    ${crossBrowserProgressValue(
-      'transition: width ${euiTheme.animation.normal} linear;'
-    )}
+    ${euiCanAnimate} {
+      /* Note: FF/Mozilla doesn't actually support animating the native progress bar
+        @see https://bugzilla.mozilla.org/show_bug.cgi?id=662351 */
+      ${crossBrowserProgressValue(
+        `transition: width ${euiTheme.animation.normal} linear`
+      )}
+    }
   `,
   // An indeterminate bar has an unreliable end time. Because of a Firefox animation issue,
   // we apply this style to a <div> instead of a <progress> element.