[Progress Bar] Indeterminate Progress Bar: animation skips in modal dialog

[Westbrook]

Description

When an .spectrum-ProgressBar--indeterminate Progress Bar is leveraged with in a .spectrum-Modal wrapped dialog, then the animation of the progress bar skips.

Steps to reproduce

1. Go to https://codepen.io/Westbrook/pen/bGreRdx?editors=1010
2. Click on "Open Scrolling Dialog"
3. Observe the progress bar skip
4. Click "Toggle Fix" adds overflow: visible; max-width: 100%; (the second might not be needed but I was testing in a rather narrow window.
5. See the animation go smoothly.

Expected behavior

Animation should be smooth.

Environment

• Spectrum CSS version: Latest
• Browser(s) and OS(s): Chrome Version 94.0.4606.81 (Official Build) (x86_64)

Additional context

Relates to https://github.com/adobe/spectrum-web-components/issues/1869

[sorinsarca]

Changing the width of the progress bar will completely break the component, see pen.

The problem seems to be in the component design: in order to completely move the fill from left to right inside the track, you need to know the width of the track, which is impossible unless is a fixed absolute value. Percents will also not work because they are relative to the element being animated, in this case the fill.

My proposal is to add a wrapper to the fill, let's call it slider, and add the animation on the slider. The slider can use the variable that sets the width of fill to position accordingly. In this way the fill can also have a relative width value because slider is 100% of the parent. See this fiddle for examples.