ProgressBar: Add transition to determinate indicator (#53877)

* ProgressBar: Add transition to determinate indicator * Add CHANGELOG entry * Increase transition time from 0.2s to 0.4s
WordPress · Aug 23, 2023 · f5a26db · f5a26db · github-actions · Aug 23, 2023
1 parent fcaa663
commit f5a26db
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -6,6 +6,10 @@
 
 -   `SandBox`: Fix the cleanup method in useEffect ([#53796](https://github.com/WordPress/gutenberg/pull/53796)).
 
+### Enhancements
+
+-   `ProgressBar`: Add transition to determinate indicator ([#53877](https://github.com/WordPress/gutenberg/pull/53877)).
+
 ## 25.6.0 (2023-08-16)
 
 ### Enhancements

diff --git a/packages/components/src/progress-bar/styles.ts b/packages/components/src/progress-bar/styles.ts
@@ -54,7 +54,10 @@ export const Indicator = styled.div< {
 					animationName: animateProgressBar,
 					width: `${ INDETERMINATE_TRACK_WIDTH }%`,
 			  } )
-			: css( { width: `${ value }%` } ) };
+			: css( {
+					width: `${ value }%`,
+					transition: 'width 0.4s ease-in-out',
+			  } ) };
 `;
 
 export const ProgressElement = styled.progress`