Progress Bars

Requirements

• Keep the supplied Add progress bar button (data-testid="add") and list container (data-testid="bars"). Append exactly one new bar per click.
• Each bar has data-testid="progress", role="progressbar", an accessible label "Progress 1", "Progress 2", and so on, aria-valuemin="0", aria-valuemax="100", and an aria-valuenow reflecting its numeric progress.
• Inside each bar, render one fill element with data-testid="fill" and an inline width matching progress as a percentage, from 0% to 100%.
• New bars start at 0% and fill visibly and gradually over approximately 2000ms. Use elapsed time rather than relying on an exact count of timer ticks. Do not fill immediately or wait two seconds before jumping from 0 to 100.
• Run all bars concurrently. Keep existing bars and their progress when a new bar is added. Completed bars remain at 100%; adding a later bar must still work.
• Clear timers or animation frames when complete or on unmount; prevent background updates after leaving or switching technologies.
• Keep CSS in a separate supplied file and keep the page usable on narrow screens. The native button must be keyboard accessible. No APIs, persistence, pause/reset controls, queueing, or concurrency limits are required.

Examples

Input: Click Add progress bar once
Output: One bar fills gradually and then stays full.

Input: Click Add progress bar three times quickly
Output: Three bars fill concurrently.

Input: Add a second bar one second after the first
Output: The first keeps its existing progress; the second starts from 0%.