Progress Bar
Problem statement
A Progress Bar is one of the simpler machine coding questions, but it's a trap for candidates who don't think about accessibility, don't clamp the value correctly, or don't know that HTML has a native progress element. Your task is to build a reusable ProgressBar component in React that accepts a value (0–100), a color variant, and an optional label, and renders a smooth animated bar that fills proportionally.
The interview value here is not in the complexity — it's in the details: the ARIA attributes that make it accessible to screen readers, the clamping logic that prevents broken layouts at edge values, the CSS transition that makes value changes feel smooth, and the design decision of when to use the native element vs a custom one. Getting all of these right in under 25 minutes is what makes a candidate stand out on an easy question.
Requirements & constraints
- Render a horizontal track with a filled inner bar proportional to value (0-100)
- Value is clamped between 0 and 100 — values outside this range are handled gracefully
- Show the percentage as a label inside the bar (if the bar is wide enough) or beside it
- Animate the width change smoothly with a CSS transition when value changes
- Support color variants: primary, success, warning, danger
- Use role=progressbar with aria-valuenow, aria-valuemin, aria-valuemax for accessibility
How to approach Progress Bar
The strategy an interviewer expects you to reach for.
Problem Understanding Progress Bar is given to test whether you deliver quality on easy questions. Many candidates rush through it, skipping ARIA, forgetting to clamp, or not adding a CSS transition. Interviewers use simpler questions specifically to see your floor — the minimum quality level of your work. A polished Progress Bar implementation in 22 minutes is actually more impressive than a buggy Autocomplete in 28.
The full solution is part of HelloFrontend Pro
The question above is free to read in full. Upgrade to unlock the interactive workspace and the senior-level walkthrough that go with it.
- Live React sandbox pre-wired for this component
- Time-boxed checkpoints that mirror a real 45-minute round
- Interviewer scoring criteria and a full reference implementation
Already a member? Log in to open the workspace.