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.

Learn React For Free On YouTube

After you read this article, I’d love for you to check out my Free YouTube Tutorial on React, where I show you how to build a Thumbnail Gallery from scratch. Feel free to give it a bookmark before you start reading! =)

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:

A boring, empty 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.

Dynamically setting the width of Filler based on its prop value

Thats 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!

https://github.com/dzuz14

Links

Learn React For Free On YouTube

After you read this article, I’d love for you to check out my Free YouTube Tutorial on React, where I show you how to build a Thumbnail Gallery from scratch. Feel free to give it a bookmark before you start reading! =)

Full Progress Bar Example on Codepen

DanZuzevich.com