How to animate multiple progress bars in a sequence? | Uber Frontend Interview Question | React.js | JavaScript | HTML | CSS

In this question, the candidate needs to add and animate multiple progress bars on a button click.

Specifications

• Upon clicking the button, we need to add a progress bar on the screen.
• The progress bar should complete the animation from 0% to 100% in 3 seconds.
• Upon clicking the button multiple times, the progress bars should be queued. Loading/Animation of Nth bar should only start when N-1 animation is complete.

Demo

Mockups

• Single Progress Bar

• Multiple Queued Progress Bars

Submission

Start the timer, complete your solution, test your solution against the test cases provided by the platform, and submit it. Ideally, you should finish this question within 30 mins.

Share your solution with us on Twitter or LinkedIn.