Christina Greene
Jun 10 · 5 min read

Have you ever wanted to include a progress bar in a React project but you couldn’t find a simple resource to guide you in the right direction? Well, today is your lucky day! You won’t need to install a library, you won’t need to dissect complicated explanations — everything you need is right here. Let’s begin.

Step 1: Create a new component file and set up the appropriate imports.

Setting up a component file for the progress bar.

You’ll want to be sure to include the react and styled-components imports as we will require them all throughout this process. Don’t forget to include the render and return method in the class component.

Step 2: Create the progress bar HTML components.

You’ll need to create two divs; an outer div and an inner div. The outer div will be the progress bar’s container and the inner div will fill up the container, bit by bit, to indicate the user’s current stage in your app. Divs can be created as consts between the import and the initial ‘class ProgressBar extends Component’ lines. This is where we make use of the styled-components import. It is important to note the use of back-ticks as we will be using a template literal to pass an expression that keeps track of the ProgressInTracker inner div. You’ll want to add some general styling to these divs so that we can see what’s going on with and without the inner div filling it up. To make things simpler, let’s focus on one div at a time.

The outer div. I have appropriately named mine Tracker. Once created and styled, you can incorporate the Tracker into the render, return section of the ProgressBar file. You’ll also want to import the ProgressBar component into your main App file in both the imports section and in the render, return section. You should now be able to see a bar on the screen.

The outer div’s base styles.

The inner div. Another aptly named item is the ProgressInTracker div. This div will base its width (the progress meter) off of the percentage which will be passed as a prop through the main App file. The height should be 100% of the parent container and you should choose a contrasting colour from the outer div. I set the border-radius to be slightly smaller from the outer div and set up an animation on the width so that everything flows smoothly. Let’s pass the inner div into the Tracker tags that were previously set up, and set the percentage to 25 to make sure everything is working.

Incorporating the outer and inner divs into the HTML components.

Step 3: Calculating the progression.

Now that the bones of the progress bar have been created, we’ll want to start sorting out how the inner div will get the instruction to start filling up. Head back into your main App file (or wherever you imported the ProgressBar component into) and set an initial state for percentage to the outer div (chances are, you want your progress bar to start at 0). Pass the state to the ProgressBar component in the render, return section.

Setting the initial state for percentage.

Head back to your ProgressBar component file so that we can pass the percentage as props to the ProgressInTracker render, return section.

Step 4: Controlling the progress.

Linking the progression amount with the button click.

In the main App file, we’ll need to add a button to control when the progress bar starts to fill up by using the onClick function. Within the onClick function, you’ll need to set the state of percentage to be equal to the initial state + X (however much you want the progress bar to increase by each time the button is clicked — I chose 25 as I have 4 steps for the user to complete on my app). Test it out — your inner div should be increasing by your defined amount.

Step 5: Error handling.

We all know someone who can be a little trigger happy with the mouse so we want to ensure that our progress bar will never surpass the width of its container when users click the button. In the ProgressBar file, we’ll need to set up a new function that can do the math for our lovely, little creation.

MATH.

Let’s pass the function to our ProgressInTracker component so that the minimum value is 0, the value is the percentage at the time of the click and the maximum value is 100.

Using the math to perfect your amazing progress bar.

As we near the end of this journey, I would like to point out that you can easily add a ‘Previous’ button into the mix so that the progress bar has the ability to decrease. I know, we are getting really fancy over here but should you find the need for your progress bar to head in the reverse direction, simply add another button (à la step 4), give it the same function that you gave the Next button, and change the plus sign to a minus one. EASY PEASY.

Guess what? You did it! You should now have a fully functioning progress bar. I’m proud, you should be proud, we are all so very proud. Now you can incorporate this sleek feature into any project or app to keep your user organized and well-informed.


Concept based on JR Development (https://youtu.be/1RfVTrmy4ww)

The Startup

Medium's largest active publication, followed by +492K people. Follow to join our community.

Christina Greene

Written by

A gluten-free Front-End Developer who likes to travel and bake cupcakes (I promise they don’t taste like cardboard). | HackerYou Cohort 22

The Startup

Medium's largest active publication, followed by +492K people. Follow to join our community.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade