82Build a progress bar system supporting multiple queued animations
mediumAbout 40 minutesCodingreactanimationrequestAnimationFramequeues
Problem
Build <ProgressBars duration={2000} concurrency={3} />:
- An Add button appends a new progress bar.
- Each bar fills from 0% to 100% over
durationmilliseconds. - At most
concurrencybars fill at the same time. Extra bars wait in a queue at 0% and start, in order, as soon as a running bar finishes. - Pause freezes every running bar exactly where it is; Resume continues from there. (Toggle one button between the two labels.)
- Reset removes every bar.
- Each bar is
<div role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow={percent}>.
Drive the animation with one requestAnimationFrame loop for all bars, not one timer per bar.
Try it yourself
Write your solution, run it, then submit to check it against the tests.
App.jsxReact + DOM
Step-by-step
Each bar is { id, progress }, where progress is the elapsed milliseconds (0 to duration). Storing elapsed time instead of a start time makes pausing trivial: nothing advances while paused.
Unlock the full solution
What's inside
- Step-by-step
- Approach
- Solution
- Complexity
- Edge cases
- Follow-up questions
- Tests
Includes 2 code listings, 5 edge cases, 4 follow-up questions.
One-time payment by UPI, card or net banking. Launch price.