How to Create Your Own Progress Bar Quickly

A progress bar is an essential UI element that provides users with visual feedback about their progress within a task, whether it's filling out a form, completing a test, or uploading a file. This blog will guide you through creating a dynamic progress bar in React that adapts based on the current question completed in a test.

Often we create a progress bar to indicate how many questions have been completed or not. The border for completed questions will be a certain color, and the remaining part will be another color.
Afterward, Calculate the width of the completed part and style it accordingly

Step 1: Setting Up the React Component

First, ensure your React project and tailwind CSS is set up. If you're starting fresh, use the following commands to initialize:

npx create-react-app progress-bar-demo
cd progress-bar-demo
npm install tailwindcss
npm start

Step 2: Understanding the Requirements

Our progress bar will:

1. Dynamically change based on the current question index.

2. Display completed sections in purple and upcoming sections in gray.

3. Use a flexible and reusable component structure.

Step 3: Designing the Progress Bar

How you can define a ProgressBar component:

const ProgressBar = ({ currentStep, totalSteps }) => {
  const progressPercentage = ((currentStep + 1) / totalSteps) * 100;

  return (
    <div className="w-full bg-gray-200 rounded-lg h-6">
      <div
        className="bg-purple-700 h-6 rounded-lg transition-all duration-300"
        style={{ width: `${progressPercentage}%` }}
      ></div>
    </div>
  );
};

This component accepts:

• currentStep: The current question index.

• totalStep: The total number of questions.

Step 4: Integrating into the Test Component

To showcase the progress bar dynamically, we’d include it in the test navigation setup:

const TakeTest = () => {
  const [currentQuestion, setCurrentQuestion] = useState(0);
  const totalQuestions = 10;

  const handleNext = () => {
    if (currentQuestion < totalQuestions - 1) {
      setCurrentQuestion((prev) => prev + 1);
    }
  };

  const handlePrevious = () => {
    if (currentQuestion > 0) {
      setCurrentQuestion((prev) => prev - 1);
    }
  };

  return (
    <div className="max-w-2xl mx-auto p-4">
      <h2 className="text-xl font-bold mb-4">Take Your Test</h2>
      <ProgressBar currentStep={currentQuestion} totalSteps={totalQuestions} />

      <div className="flex justify-between mt-4">
        <button
          className="bg-gray-300 px-4 py-2 rounded-lg"
          disabled={currentQuestion === 0}
          onClick={handlePrevious}
        >
          Previous
        </button>
        <button
          className="bg-purple-700 text-white px-4 py-2 rounded-lg"
          disabled={currentQuestion === totalQuestions - 1}
          onClick={handleNext}
        >
          Next
        </button>
      </div>
    </div>
  );
};

Step 6: Enhancing the UI

To improve the visual appearance, add tooltips or percentages above the progress bar. For example:

<div className="text-center mb-2 text-sm font-medium">
  {Math.round(((currentStep + 1) / totalSteps) * 100)}% Complete
</div>

In conclusion:

With this step-by-step approach, you’ve created a fully functional and appealing progress bar in React. It’s reusable and easy to integrate into other components. You can experiment to fit your project’s style!
PS. The picture below depicts the visual appearance of the progress bar I created, with a functioning previous and next button

Thank you for reading.✨🎉🎉
If you loved it, kindly like, share and comment.

cheers!