Progress Bars

Build a list of progress bars that animate from empty to full as they appear on screen. It's a small step up from a single bar, and it teaches a surprisingly common gotcha: to make something animate in on mount, you can't just render it in its final state — you have to render the start state first, then change to the end state after the browser has painted, so there's something to transition between.

Signature

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

Several bars that each transition their fill from 0% to 100% when the component mounts.

Examples

on mount:        all bars at 0%   (empty)
~frame later:    width set to 100% → CSS transitions the fill
after ~1.6s:     all bars at 100% (full)

The animation is pure CSS (`transition: width …`). React's only job is to
flip the width from 0% to 100% one paint after mount.

Notes

• Render the start state first. If you render the fill at 100% immediately, there's nothing to animate — it's just full. Render 0%, then set 100% after the first paint.
• Let CSS do the animation. A transition: width on the fill animates the change for free; you only toggle the value.
• Flip after paint, not during render. Use an effect (with requestAnimationFrame, or a 0 ms timeout) so the 0% state paints before you switch to 100%.
• Out of scope. Sequencing, concurrency, pause/resume — those are the later questions. Here every bar animates at once on mount.