Frontend interview — Create a progress bar with HTML, CSS and Javascript

One common interview question for Frontend developers is the Create a progress bar question. In most situations the developer is asked to use pure Javascript and not a library or framework other than the DOM API.

This question evaluates the interviewee’s understanding of pure Javascript, the Document Object Model (DOM) and Javascript’s time functions such as setTimeout and setInterval.

The developer is normally expected to come up with a progress bar that can be reused multiple times. Bonus points are given for making the progress bar customizable (custom width, time of completion, and background colour).

I have prepared two video tutorials that start with the assumption that the progress bar lives inside a `500px` by `30px` container and it starts at 0% and covers the entire container (100% width of the container) in 3 seconds. Then, I take the solution for that and make it reusable with a Javascript class and customizable with a configuration object.

Checkout the following playlist for the two videos and do like and share the videos if you find them helpful. And of course SUBSCRIBE to the channel to get notifications when more videos come out.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store