Create a React.js Progress Bar in a Few Simple Steps

How do you show progress in your app?

You might be tracking a task, showing a file upload, or just letting users know something's loading. A progress bar clearly shows what's happening. It keeps users informed and, honestly, makes things feel smoother.

React makes it easy to build one, and you don't have to rely on generic designs. You can create a custom progress bar that fits your app perfectly.

In this blog, we’ll walk through building a progress bar step by step. By the end, you’ll have a fully functional component with props for customization, inline styling, and accessibility features.

Let’s get started!

1. Setting Up the React App

Before diving into the progress bar, start by creating a new React app using Create React App.

Copy
1npx create-react-app progress-bar-app
2cd progress-bar-app
3npm start

Once the setup is complete, delete unnecessary files in the src folder to keep the project clean.

2. Understanding the Progress Bar Structure

A progress bar consists of two main elements:

• A parent div, which serves as the container.

• A child div, representing the completed part of the bar.

Basic Structure

Copy
1const ProgressBar = ({ value, max }) => {
2  return (
3    <div style={{ width: "100%", background: "#e0e0df", borderRadius: "5px" }}>
4      <div
5        style={{
6          width: `${(value / max) * 100}%`,
7          background: "#3b5998",
8          height: "20px",
9          borderRadius: "5px",
10        }}
11      />
12    </div>
13  );
14};

This simple progress bar component takes two props: value and max, calculating the completed percentage number dynamically.

3. Styling the Custom Progress Bar

Applying inline styling ensures flexibility in customizing the progress bar.

Copy
1.progress-container {
2  width: 100%;
3  background-color: #e0e0df;
4  border-radius: 10px;
5  overflow: hidden;
6}
7
8.progress-bar {
9  height: 20px;
10  background-color: #3b5998;
11  text-align: center;
12  line-height: 20px;
13  color: white;
14  font-weight: bold;
15  border-radius: 10px;
16  transition: width 0.4s ease-in-out;
17}

Here, the .progress-bar class ensures smooth animation and rounded corners using border radius.

4. Creating the Custom Progress Bar Component

The custom progress bar should support dynamic progress values and additional props for styling.

Copy
1const CustomProgressBar = ({ progressValue, max, label, progressbarBgcolor }) => {
2  return (
3    <div className="progress-container">
4      <div
5        className="progress-bar"
6        style={{
7          width: `${(progressValue / max) * 100}%`,
8          backgroundColor: progressbarBgcolor || "#3b5998",
9        }}
10        aria-valuenow={progressValue}
11        aria-valuemin="0"
12        aria-valuemax={max}
13        aria-labelledby="progressLabel"
14      >
15        {label && <span id="progressLabel">{label}</span>}
16      </div>
17    </div>
18  );
19};

Key Features

• Supports aria labelledby for accessibility.

• Accepts a string as the label text.

• Customizable progressbar bgcolor.

• Uses props like progressValue, max, and label.

5. Adding Multiple Progress Bars

Implementing multiple progress bars helps track different tasks.

Copy
1const App = () => {
2  return (
3    <div>
4      <CustomProgressBar progressValue={30} max={100} label="Task 1" progressbarBgcolor="green" />
5      <CustomProgressBar progressValue={50} max={100} label="Task 2" progressbarBgcolor="blue" />
6      <CustomProgressBar progressValue={80} max={100} label="Task 3" progressbarBgcolor="red" />
7    </div>
8  );
9};

This renders multiple progress bars, each with a different progress value and background color.

6. Animating the Progress Bar

To make the progress bar visually engaging, add an animation effect.

Copy
1@keyframes progressAnimation {
2  from { width: 0; }
3  to { width: 100%; }
4}
5
6.progress-bar {
7  animation: progressAnimation 2s ease-in-out;
8}

This animation smoothly fills the bar, enhancing the user experience.

7. Controlling Progress Dynamically

To dynamically update the progress value, use React state.

Copy
1const DynamicProgressBar = () => {
2  const [progress, setProgress] = React.useState(0);
3
4  return (
5    <div>
6      <CustomProgressBar progressValue={progress} max={100} label="Loading..." />
7      <button onClick={() => setProgress(progress + 10)}>Increase Progress</button>
8    </div>
9  );
10};

Clicking the button increases the completed percentage number, showing real-time updates.

8. Enhancing Accessibility with ARIA Attributes

Accessibility is vital in web development. The aria-valuenow, aria-valuemin, and aria-valuemax attributes improve usability.

Copy
1<div
2  role="progressbar"
3  aria-valuenow={progress}
4  aria-valuemin="0"
5  aria-valuemax="100"
6  aria-labelledby="progressLabel"
7>
8  <span id="progressLabel">Progress: {progress}%</span>
9</div>

These attributes make the progress bar more readable for screen readers.

9. Making the Progress Bar More Customizable

A custom progress bar should allow users to modify aspects like width, background, and label text.

Copy
1const FullyCustomProgressBar = ({ width, progressbarBgcolor, label }) => {
2  return (
3    <div className="progress-container" style={{ width }}>
4      <div className="progress-bar" style={{ background: progressbarBgcolor }}>
5        <span>{label}</span>
6      </div>
7    </div>
8  );
9};

Passing different values for width and progressbarBgcolor customizes the bar appearance.

10. Displaying a Maximum Limit Indicator

Displaying the maximum limit helps users understand the range of the progress.

Copy
1const MaxIndicatorProgressBar = ({ value, max }) => {
2  return (
3    <div className="progress-container">
4      <div className="progress-bar" style={{ width: `${(value / max) * 100}%` }}>
5        <span>{value}/{max}</span>
6      </div>
7    </div>
8  );
9};

This provides a visual reference for the maximum progress value.

Bring Your React.js Progress Bar to Life!

A well-designed React.js progress bar does more than just show progress—it makes the user experience smoother. Whether you're tracking file uploads, form completion, or any other process, a clear visual cue keeps users engaged.

Try tweaking colors, animations, or even the way progress updates. Maybe a fun gradient? A pulsing effect? Small touches like these can make a big difference.

What kind of progress bar will you build next?