Creating a Progress Bar in React JS | Updated 2024

90

Progress bars are critical visual elements in web applications, providing users with real-time feedback on ongoing processes such as file uploads, downloads, or any lengthy computational tasks. In React JS, integrating dynamic and responsive progress bars enhances user experience by visually indicating the progress of an activity, thereby reducing user anxiety during wait times. This comprehensive guide will walk you through various implementations of progress bars in React, ranging from simple horizontal bars to more complex circular and semicircular designs.

Step by Step Guide with Code Example

Step 1: Set Up Your React Environment

If you haven’t already set up a React environment, you can create a new project using Create React App:

npx create-react-app progress-bar-example
cd progress-bar-example
npm start

This command sets up a new project and runs the development server.

Step 2: Create the ProgressBar Component

Let’s start by creating a ProgressBar component. This component will accept completed as a prop, which represents the percentage of the task completed.

Create a New File

Create a new file named ProgressBar.js in the src folder of your project.

Add the Basic Structure

import React from 'react';

const ProgressBar = ({ completed }) => {
  const containerStyles = {
    height: 20,
    width: '100%',
    backgroundColor: "#e0e0de",
    borderRadius: 50,
    margin: 50
  };

  const fillerStyles = {
    height: '100%',
    width: `${completed}%`,
    backgroundColor: 'green',
    borderRadius: 'inherit',
    textAlign: 'right',
    transition: 'width 1s ease-in-out'
  };

  const labelStyles = {
    padding: 5,
    color: 'white',
    fontWeight: 'bold'
  };

  return (
    <div style={containerStyles}>
      <div style={fillerStyles}>
        <span style={labelStyles}>{`${completed}%`}</span>
      </div>
    </div>
  );
};

export default ProgressBar;

Step 3: Use the ProgressBar Component

Now, let’s use this ProgressBar component in our application.

Modify the App.js

Open the App.js file and modify it as follows:

import React, { useState, useEffect } from 'react';
import ProgressBar from './ProgressBar';

function App() {
  const [completed, setCompleted] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCompleted(oldCompleted => {
        const newCompleted = oldCompleted + 10;
        if (newCompleted >= 100) {
          clearInterval(interval);
          return 100;
        }
        return newCompleted;
      });
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return (
    <div>
      <h1>Progress Bar Example</h1>
      <ProgressBar completed={completed} />
    </div>
  );
}

export default App;

Different React JS Progress Bars: Comprehensive Guide with Examples

Below is a comprehensive guide covering various types of progress bars in React, including their implementation and practical code examples. Each type serves specific scenarios in web applications, enhancing user experience by providing visual feedback on the progress of operations.

Circular Progress Bar in React JS

A circular progress bar is visually appealing and often used in dashboards and during loading phases. Here’s how to implement it using CSS and SVG:

Code Example:

import React from 'react';

function CircularProgress({ progress }) {
  const radius = 50;
  const circumference = 2 * Math.PI * radius;
  const strokeProgress = circumference - (progress / 100) * circumference;

  return (
    <svg width="120" height="120">
      <circle
        stroke="lightgray"
        fill="transparent"
        strokeWidth="10"
        r={radius}
        cx="60"
        cy="60"
      />
      <circle
        stroke="green"
        fill="transparent"
        strokeWidth="10"
        r={radius}
        cx="60"
        cy="60"
        strokeDasharray={circumference}
        strokeDashoffset={strokeProgress}
        transform="rotate(-90 60 60)"
      />
      <text x="50%" y="50%" dy="7" textAnchor="middle">{`${progress}%`}</text>
    </svg>
  );
}

export default CircularProgress;

Dynamic Progress Bar in React JS

A dynamic progress bar adjusts its progress dynamically based on application state. Here’s a basic example:

Code Example:

import React, { useState, useEffect } from 'react';

function DynamicProgressBar() {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setProgress((oldProgress) => {
        const newProgress = oldProgress + 10;
        if (newProgress === 100) {
          clearInterval(interval);
        }
        return newProgress;
      });
    }, 1000);
  }, []);

  return (
    <div style={{ width: '100%', backgroundColor: '#ddd' }}>
      <div style={{
        height: '20px',
        width: `${progress}%`,
        backgroundColor: 'green',
      }} />
    </div>
  );
}

export default DynamicProgressBar;

File Upload Progress Bar in React JS

This example shows how to create a progress bar that displays the progress of a file upload using axios for making HTTP requests.

Code Example:

import React, { useState } from 'react';
import axios from 'axios';

function FileUploadProgressBar() {
  const [progress, setProgress] = useState(0);

  const uploadFile = async (event) => {
    const file = event.target.files[0];
    const formData = new FormData();
    formData.append('file', file);

    const config = {
      onUploadProgress: (progressEvent) => {
        const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
        setProgress(percentCompleted);
      }
    };

    await axios.post('/upload', formData, config);
  };

  return (
    <div>
      <input type="file" onChange={uploadFile} />
      {progress > 0 && <div style={{ width: '100%', backgroundColor: '#ddd' }}>
        <div style={{
          height: '20px',
          width: `${progress}%`,
          backgroundColor: 'green',
        }}>{progress}%</div>
      </div>}
    </div>
  );
}

export default FileUploadProgressBar;

Horizontal Progress Bar in React JS

Horizontal progress bars are the most common type used in web applications. Here’s how you might implement one:

Code Example:

import React from 'react';

function HorizontalProgressBar({ progress }) {
  return (
    <div style={{ width: '100%', backgroundColor: '#eee', borderRadius: '5px' }}>
      <div style={{
        height: '10px',
        width: `${progress}%`,
        backgroundColor: 'blue',
        borderRadius: '5px'
      }} />
    </div>
  );
}

export default HorizontalProgressBar;

Semicircle Progress Bar with Segments in React JS

Creating a semicircle progress bar that includes segments requires SVG manipulation. Here’s a basic example:

Code Example:

import React from 'react';

function SemicircleProgressBar({ progress }) {
  const strokeArray = progress > 50 ? '0, 100' : `${100 - progress * 2}, 100`;

  return (
    <svg width="200" height="100">
      <path d="M 10,100 A 90,90 0 0,1 190,100" fill="transparent" stroke="#ddd" strokeWidth="20" />
      <path d="M 10,100 A 90,90 0 0,1 190,100" fill="transparent" stroke="green" strokeWidth="20"
        strokeDasharray={strokeArray} />
    </svg>
  );
}

export default SemicircleProgressBar;

Touchable Progress Bar in React JS

A touchable progress bar allows users to set the progress by clicking or dragging. Here’s how you might implement it using mouse events:

Code Example:

import React, { useState } from 'react';

function TouchableProgressBar() {
  const [progress, setProgress] = useState(0);

  const handleMouseMove = (e) => {
    const newProgress = Math.floor((e.clientX / window.innerWidth) * 100);
    setProgress(newProgress);
  };

  return (
    <div
      style={{ width: '100%', backgroundColor: '#ddd' }}
      onMouseMove={handleMouseMove}
    >
      <div style={{
        height: '20px',
        width: `${progress}%`,
        backgroundColor: 'green',
      }} />
    </div>
  );
}

export default TouchableProgressBar;

Conclusion: Enhancing Web Applications with Progress Bars

Implementing effective progress bars in your React applications can significantly improve the user experience by providing clear and dynamic feedback on the progress of operations. Whether you choose a simple horizontal progress bar for straightforward tasks or a segmented semicircular bar for aesthetic impact, each type serves to keep users informed and engaged with your application. This guide aims to provide you with the knowledge and tools to implement these features seamlessly across different contexts, ensuring your applications are as user-friendly and efficient as possible.

Progress Bar in React JS – FAQs