How To Build A Progress Bar With React
This tutorial is for anyone who is interested in how they would go about building a simple progress bar in React. To make this nice and easy for everyone, I am going to build out our example in Codepen as we progress through the tutorial. A link to the completed version will be included at the end.
P.S. If you like this article, check out my article on uploading files on React with Hooks here.
Planning The Component
Before we start writing code, lets quickly architect what our React Progress Bar should look like. To me, it seems as if we only really need two elements to make up our progress bar. These elements are:
- A parent div that holds another div inside of it. Lets name this one ProgressBar.
- A div that acts as the filler inside of the parent div. This div will be styled with color, and will fill up an x percentage of the container horizontally and vertically. Lets name this one Filler.
Scaffolding The ProgressBar
Alright, let’s get to coding. Lets start out by building the scaffold of the progress bar. In this tutorial, I use ProgressBar as a functional React Component. There are plenty of other ways to go about this, but lets just go with this approach.
This is the parent div I was talking about in the planning section. Inside of it, we just need to add the Filler component. We don’t have that built out yet, so lets build it!
Great. We have our two components. Lets put them all together by adding the Filler inside of ProgressBar.
Wow, this is incredible. Except, there is absolutely no styling to either of these components. Lets quickly style these up!
The styles on the progress-bar class are pretty straight forward. All I am doing is giving it an initial height and width, a border, and some rounded edges by using border-radius. Its important to note my use of position: relative on the progress bar class, this is needed, as I assign a height of 100% to the filler class.
For the filler styles, these are easy to understand as well. I set the background of the filler to a turquoise blue-ish color(#1DA598), and make sure the height of my filler matches its parent, by giving it a height of 100%. I also want the border-radius to match the parent, so I set it to inherit from its parent.
You might be curious about the transition I added onto the filler. This simply makes the filler transition more naturally when it increases/decreases in size. Lets check out what we currently have for the progress bar:
We can fix this boring progress bar by adding some props. Lets do it!
Adding The Necessary Props To The Component
We need to come up with some type of system that allows for our progress bar’s filler component to dynamically change in width. This is where we need to start integrating the state and props features of React. To do so, lets build another component that will allow us to test and implement those features.
As you can see, I initialize a property on the state called percentage, and assign it an initial value of 0. This is the state variable we are going to use to control the width of our filler. To make the ProgressBar aware of this value, I pass it as a prop attached to the component.
There is a problem though. Its great that we are passing the value down as a prop, but the ProgressBar component still has no idea how to deal with this prop. To fix this, we can simply do the following:
By creating a prop attached to Filler, we can pass the value down further into Filler. All we need to do now, is do something with the value we receive inside of Filler, and we should be done.
Setting The Width of Filler
The final thing we need to do is to take the value we receive as a prop in Filler, and set that value to be the width of Filler. This can easily be implemented via inline-styling. Lets see how its done.
That’s it! Just for kicks, lets change the initial state property of ProgressBarExample to 60:
Now look at our beautiful progress bar in action!
Wrapping Things Up
Now I know this was just a very simple example, but I have included a more in-depth version for you to mess around with on Codepen. It is fully interactive, and hopefully it teaches you something new. If you liked this tutorial, I’d love for you to give me a follow on GitHub!
Subscribe To My YouTube Channel
Full Progress Bar Example on Codepen
