Machine Coding 101 - Progress Bars

Well in this article, let's talk and understand from the ground up the problem of Progress bars which is asked in some machine coding rounds. In this, we will understand how to create a Progress bar and control it.

The problem description goes like this

The output looks something like this, wherein:

1. You click on the 'Add' button.
2. For 'n' clicks, you should have 'n' progress bars. The example image below shows three progress bars because the 'Add' button has been clicked three times; here, n = 3.
3. The challenging part is that each bar should take 2000 milliseconds for completion.

The solution intuition ?

There are many solutions to this problem. Various approaches are available using different techniques. But let me talk about one good solution. This uses some CSS animation and some basic ReactJS. So let us dive deep into this.

The idea is to use the concept of arrays and some CSS

1. Create progress bars and add them to the array.
2. And then make them auto-complete in a period of 2000 milliseconds.

Let's do this step by step:

First, let us create a progress bar, and for this, we need 2 divs or divisions

Below is the Progress bar component, with a parentDiv and a childDiv and we style them to represent the progress bar. The outer div gives the background grey and the inner div is just having a height.

We will discuss the class 'progress' at the end. This has to do something with CSS animations.

Code is given below

const ProgressBar = () => {
  const parentDiv = { height: "12px", background: "lightgrey" };
  const childDiv = {height:'100%'};

  return (
    <div style={parentDiv}>
      <div style={childDiv} className="progress"></div>
    </div>
  );
};        

So once this is done, let's focus on adding more Progress Bars on the button click and that is straightforward. We can achieve this using an array.

1. Add a click handler to the add button
2. Push the <ProgressBar/> component to your array, and that is it, very simple.

Yes, you can push a component inside your array

So this will be added to the UI, one after the other.

Code for the same

export default function App() {
  const [arr, setArr] = React.useState([])
  const handleAddBar = () => {
    setArr([...arr, <ProgressBar/>])
 
  };
  return (
    <div>
      <button onClick={handleAddBar}>Add</button>
     
       {arr.map(item=>{
        return <div style={{marginTop:'0.5rem'}}>{item}</div>
       })}
    </div>
  );
}        

If you notice the above code it is quite self-explanatory

1. We declare an empty array using useState.
2. Add an onClick handler handleAddBar, that actually increases the size by 1 everytime we click on the add button

 const handleAddBar = () => {
    setArr([...arr, <ProgressBar/>])
  };
//here we are pushing the component to the arr using the setter setArr        

3. Then we finally map it just like we map any other array. Please refer to the code above.

This is how we display the progress bars on click of the button one after the other

Now, that we got this out of the way, the only thing pending is the auto progress. Now, earlier I mentioned about 'progress' class. This is an animator class that adds color and width using keyframes.

.progress {
  background: darkgreen;
  width: 100%;
  animation: complete 2000ms linear;
}

@keyframes complete {
  from {
    width: 0;
  }
}        

This is given as a className to the inner div/ child div since that is the reason for the width and the color obtained. An important thing to be noted is the name of the animation and that is 'complete' with timing as 2000 milliseconds or 2 seconds.

There you go the Progress bar with auto progress is completed, output is below