Progress Bar II
Problem statement
Progress Bar II adds a stepped progress bar — like GitHub's multi-phase CI pipeline or a checkout flow indicator. Instead of a smooth fill, the bar is divided into N equal segments, and completed segments are filled. This tests dynamic rendering and step state logic.
Build a SteppedProgress component that takes steps (an array of labels) and current (the active step index). Completed steps show as filled, the current step shows as pulsing/active, and future steps are empty. Clicking a step should navigate to it.
The CSS challenge is making N equal-width segments that together fill 100% of the container, with connecting lines between them that are independently colored based on completion state.
Requirements & constraints
- N equal segments from a steps array
- Completed steps filled, current step highlighted, future empty
- Step labels shown below each segment
- Connecting line between segments changes color on completion
- Clicking a step navigates to it
- Animated pulse on the current active step
How to approach Progress Bar II
The strategy an interviewer expects you to reach for.
Why This Question Exists Stepped Progress tests whether you can represent multi-step UI state cleanly. The classic mistake is storing a boolean per step ([false, true, false, false]) — this requires manual synchronisation and allows impossible states (multiple active steps). The correct approach derives all step states from a single integer index.
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.