Amazing Multi-Step Progress Bar using React

In this tutorial, we’ll explore the creation of a responsive and visually appealing multi-step progress bar component using React. This component can be utilized for various forms, surveys, or any application requiring a step-by-step process. Let’s break down the code and understand each part of the implementation.

Overview:

We’ll cover the following key aspects of the Multi-Step Progress Bar:

React Component Structure:
- Examine the React component structure, including state management and rendering logic.
CSS Styling:
- Dive into the CSS styles defining the appearance of the multi-step progress bar and action buttons.

React Component Structure:

import React, { useState } from 'react';
import './multistep.css'; // Import the CSS styles

const MultiStep = () => {
  const [currentStep, setCurrentStep] = useState(1);

  const updateSteps = (step) => {
    setCurrentStep(step);
  };

  const handleButtonClick = (step) => {
    updateSteps(step);
  };

  return (
    <div className="container">
      <div className="steps-container">
        {[1, 2, 3, 4].map((stepNumber) => (
          <span key={stepNumber}>
            {stepNumber > 1 && <div className="line"></div>}
            <span
              className={`step-circle ${stepNumber === currentStep ? 'active' : ''}`}
            >
              {stepNumber}
            </span>
          </span>
        ))}
        <div className="progress-bar-container">
          <span
            className="progress-indicator"
            style={{
              width: `${((currentStep - 1) / 3) * 100}%`,
            }}
          ></span>
        </div>
      </div>
      <div className="action-buttons">
        <button
          id="prev"
          disabled={currentStep === 1}
          onClick={() => handleButtonClick(currentStep - 1)}
        >
          Prev
        </button>
        <button
          id="next"
          disabled={currentStep === 4}
          onClick={() => handleButtonClick(currentStep + 1)}
        >
          Next
        </button>
      </div>
    </div>
  );
};

export default MultiStep;

JSX

Explanation:
- The MultiStep component uses React functional components and the useState hook.
- The currentStep state manages the active step in the progress bar.
- The updateSteps function updates the current step, and handleButtonClick handles button clicks.

CSS Styling:

/* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f6f7fb;
}
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  max-width: 400px;
  width: 100%;
}
.steps-container {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.steps-container .step-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  width: 50px;
  color: #999;
  font-size: 22px;
  font-weight: 500;
  border-radius: 50%;
  background: #fff;
  border: 4px solid #e0e0e0;
  transition: all 200ms ease;
  transition-delay: 0s;
}
.steps-container .step-circle.active {
  transition-delay: 100ms;
  border-color: #4070f4;
  color: #4070f4;
}
.steps-container .progress-bar-container {
  position: absolute;
  height: 4px;
  width: 100%;
  background: #e0e0e0;
  z-index: -1;
}
.progress-bar-container .progress-indicator {
  position: absolute;
  height: 100%;
  width: 0%;
  background: #4070f4;
  transition: all 300ms ease;
}
.action-buttons {
  display: flex;
  gap: 20px;
}
.action-buttons button {
  padding: 8px 25px;
  background: #4070f4;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
  transition: all 200ms linear;
}
.action-buttons button:active {
  transform: scale(0.97);
}
.action-buttons button:disabled {
  background: #87a5f8;
  cursor: not-allowed;
}

CSS

Explanation:
- The CSS styles define the visual aspects of the multi-step progress bar and action buttons.
- Poppins font is imported for a clean and modern typography style.
- Circles represent each step, and the active step has a distinctive color.
- The progress bar dynamically adjusts its width based on the current step.
- Action buttons are styled with a background color transition and a subtle box shadow.

Detailed Explanation:

React Component Structure:

MultiStep Component:
- Manages the current step using the useState hook.
- updateSteps function updates the current step, triggering a re-render.
- handleButtonClick function handles Prev and Next button clicks, updating the step accordingly.
Rendering Steps and Progress Bar:
- Maps through an array of step numbers, rendering step circles and lines.
- The current step is highlighted with the ‘active’ class.
- The progress bar’s width is dynamically calculated based on the current step.

CSS Styling:

Global Styles:
- Imports the Poppins font and sets default styles such as box-sizing and margin.
Container Styles:
- The container is centered on the screen and styled with a maximum width and padding.
Steps Container Styles:
- Flex container for step circles, lines, and progress bar.
- Step circles are styled with colors, borders, and transitions.
- Progress bar has absolute positioning and adjusts its width based on the current step.
Action Buttons Styles:
- Flex container for Prev and Next buttons.
- Buttons have styling for padding, background color, border, and cursor.
- A subtle box shadow is applied on button hover.

Conclusion:

By combining React and CSS, we’ve created a reusable and visually appealing multi-step progress bar component. This component is flexible and can be easily integrated into various projects requiring step-by-step navigation.

Feel free to customize the code further, experiment with different styles, or add additional features to suit your project’s needs.

Happy coding!