Design Converter
Education
Last updated on Feb 5, 2025
•4 mins read
Last updated on Feb 5, 2025
•4 mins read
Software Development Executive - II
I know who I am.
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!
Before diving into the progress bar, start by creating a new React app using Create React App.
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.
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.
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.
Applying inline styling ensures flexibility in customizing the progress bar.
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.
The custom progress bar should support dynamic progress values and additional props for styling.
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};
• Supports aria labelledby for accessibility.
• Accepts a string as the label text.
• Customizable progressbar bgcolor.
• Uses props like progressValue, max, and label.
Implementing multiple progress bars helps track different tasks.
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.
To make the progress bar visually engaging, add an animation effect.
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.
To dynamically update the progress value, use React state.
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.
Accessibility is vital in web development. The aria-valuenow, aria-valuemin, and aria-valuemax attributes improve usability.
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.
A custom progress bar should allow users to modify aspects like width, background, and label text.
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.
Displaying the maximum limit helps users understand the range of the progress.
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.
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?
Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!
You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.