Progress Bar

Build a progress bar — the strip that fills up to show how far along an operation is. It looks trivial (a coloured div inside a grey one), but doing it right means two things: mapping a 0–100 number to the fill's width, and making it accessible, so a screen reader can announce "65%" instead of seeing a meaningless <div>. This is the base for the whole progress-bar family that follows.

Signature

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

A track with a coloured fill whose width reflects a percentage, plus a control to change it.

Examples

pct = 0    → fill width 0%   (empty)
pct = 65   → fill width 65%
pct = 100  → fill width 100% (full)

Accessibility — the track is a progressbar:
  role="progressbar" aria-valuenow={pct} aria-valuemin={0} aria-valuemax={100}
A screen reader then announces e.g. "65 percent".

Notes

• Width is the percentage. The fill's width is ${pct}%. Keep the value clamped to 0–100 so it never overflows the track.
• Make it a progressbar. A bare <div> tells assistive tech nothing. Add role="progressbar" and aria-valuenow/min/max so the value is announced.
• One source of truth. The width, the % label, and aria-valuenow all come from the same state value — never set them independently.
• Out of scope. Animations, multiple bars, indeterminate state — those are the later questions in this family. Here it's one bar driven by one value.