Progress Bar Component in React

Progress Bar Component in React

Building a reusable progress bar component in React with props and animation.

Component

import React from "react";

function ProgressBar({ value = 0, max = 100, color, height = 20, showLabel = true }) {
  const percent = Math.max(0, Math.min(100, (value / max) * 100));
  const barColor = color || (percent < 33 ? "#ff4444" : percent < 66 ? "#ffaa00" : "#44aa44");

  return (
    <div
      className="progress-container"
      role="progressbar"
      aria-valuenow={Math.round(percent)}
      aria-valuemin={0}
      aria-valuemax={100}
      style={{ height: `${height}px` }}
    >
      <div
        className="progress-bar"
        style={{
          width: `${percent}%`,
          background: barColor,
          transition: "width 0.3s ease",
        }}
      />
      {showLabel && <span className="progress-label">{Math.round(percent)}%</span>}
    </div>
  );
}

Usage

<ProgressBar value={75} />
<ProgressBar value={50} color="#007bff" height={10} showLabel={false} />
<ProgressBar value={3} max={5} />

With Auto-Increment

function AutoProgressBar() {
  const [value, setValue] = useState(0);
  useEffect(() => {
    const interval = setInterval(() => {
      setValue((v) => {
        if (v >= 100) { clearInterval(interval); return 100; }
        return v + 1;
      });
    }, 50);
    return () => clearInterval(interval);
  }, []);
  return <ProgressBar value={value} />;
}

CSS

.progress-container { width: 100%; background: #e0e0e0; border-radius: 10px; overflow: hidden; position: relative; }
.progress-bar { height: 100%; border-radius: 10px; }
.progress-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 12px; }

The Takeaway

React progress bar: props (value, max, color, height, showLabel), clamped percentage, dynamic color based on progress, CSS transition for animation, ARIA attributes for accessibility. Reusable and customizable. Use useState + useEffect for auto-increment.