Progress

Progress.tsx

import React, { useState } from 'react';
import './Progress.css';

interface ProgressProps {
  value: number;
  max?: number;
  className?: string;
}

const Progress: React.FC<ProgressProps> = ({ value, max = 100, className = '' }) => {
  const [width, setWidth] = useState(0);

  React.useEffect(() => {
    const newWidth = Math.min(value / max, 1) * 100;
    setWidth(newWidth);
  }, [value, max]);

  return (
    <div className={`progress-bar ${className}`}>
      <div className="progress-bar__fill" style={{ width: `${width}%` }} />
      <div className="progress-bar__text">{`${width}%`}</div>
    </div>
  );
};

export default Progress;

Progress.module.css

.progress {
  display: flex;
  align-items: center;
  height: 30px;
}

.progress-bar {
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
}

.progress-bar::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: #0f62fe;
  animation: progress 2s ease-out;
}

@keyframes progress {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

Related Components