Progress Bars II

Build a list of progress bars that fill one after another — each bar only starts once the previous one has finished. Where Progress Bars animated them all at once, this version sequences them, so you need a bit of state that tracks where in the line you are, plus a timer that advances to the next bar when the current one completes.

Signature

// A self-contained component. No props.
function App(): JSX.Element;

Several bars that fill strictly in order: bar 2 begins only when bar 1 reaches 100%.

Examples

t = 0.0s   bar0 filling,  bar1 empty,    bar2 empty,    bar3 empty
t = 1.2s   bar0 FULL,     bar1 filling,  bar2 empty,    bar3 empty
t = 2.4s   bar0 FULL,     bar1 FULL,     bar2 filling,  bar3 empty
t = 4.8s   all four FULL

Only one bar animates at a time. An `active` index says which; bars before it
are full, the one at it is filling, bars after it are empty.

Notes

• One bar at a time. Track an active index (the bar currently filling). Bars before it are 100%; bars after it are 0%.
• Advance on completion. After the active bar's fill duration elapses, increment active to start the next bar. The timer's delay must match the CSS transition duration.
• Animate the first bar too. Render everything at 0% on mount, then start the sequence after the first paint (so bar 0 transitions rather than snapping).
• Clean up the timer. Clear the pending timeout on cleanup / when the sequence finishes, so nothing fires after unmount.