ProgressBar: Add transition to determinate indicator

[tyxla]

What?

This PR adds a transition to the progress bar indicator when in determinate mode.

Suggested by @jasmussen and @mtias here.

Why?

To make the progress bar feel smoother to the end user. Here's some additional rationale: #53399 (comment)

How?

We're just adding a width transition for the determinate mode only. The indeterminate one doesn't need it, because the indicator there keeps a constant width.

Testing Instructions

• Spin up storybook: npm run storybook:dev
• Open the ProgressBar component: http://localhost:50240/?path=/docs/components-experimental-progressbar--docs
• Play with the value field and witness how the indicator animates when transitioning.

Testing Instructions for Keyboard

None

Screenshots or screencast

Before:

Screen.Recording.2023-08-22.at.19.24.21.mov

After:

Screen.Recording.2023-08-22.at.19.23.22.mov

[github-actions]

Flaky tests detected in d29e4b7.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5941554375
📝 Reported issues:

• [Flaky Test] Custom Completer: should allow newlines after multiple option completions #48535 in /test/e2e/specs/editor/various/autocomplete-and-mentions.spec.js

[jasmussen]

Nice! I think you can actually make the transition even slower. Maybe try 0.4ms? But this feels solid to me!

[tyxla]

Nice! I think you can actually make the transition even slower. Maybe try 0.4ms? But this feels solid to me!

Thanks for taking a look! I think 0.4 looks better:

Screen.Recording.2023-08-23.at.12.53.01.mov

[jasmussen]

I agree, that's very nice.