当前位置：首页 > React

react实现进度条

2026-01-27 20:10:19React

使用原生HTML5实现进度条

在React中可以直接使用HTML5的<progress>元素实现基础进度条：

function ProgressBar({ value, max }) {
  return <progress value={value} max={max} />;
}
// 使用示例
<ProgressBar value={30} max={100} />

使用CSS自定义样式进度条

通过div元素和CSS实现可定制样式的进度条：

function StyledProgressBar({ percentage }) {
  return (
    <div style={{ width: '100%', backgroundColor: '#e0e0e0', borderRadius: 5 }}>
      <div 
        style={{ 
          width: `${percentage}%`, 
          height: 20, 
          backgroundColor: '#4CAF50',
          borderRadius: 5,
          transition: 'width 0.3s ease'
        }}
      />
    </div>
  );
}

使用第三方库react-progressbar

安装react-progressbar库：

npm install react-progressbar

实现示例：

import ProgressBar from 'react-progressbar';

function App() {
  return <ProgressBar completed={75} />;
}

动画效果进度条实现

结合React状态和CSS动画实现动态进度条：

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

  useEffect(() => {
    const timer = setInterval(() => {
      setProgress(prev => (prev >= 100 ? 0 : prev + 10));
    }, 500);
    return () => clearInterval(timer);
  }, []);

  return (
    <div style={{ width: '100%', backgroundColor: '#f0f0f0' }}>
      <div style={{
        width: `${progress}%`,
        height: 20,
        backgroundColor: '#2196F3',
        transition: 'width 0.5s ease-out'
      }} />
    </div>
  );
}

圆形进度条实现

使用SVG创建圆形进度条：

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

  return (
    <svg width={radius * 2} height={radius * 2}>
      <circle
        cx={radius}
        cy={radius}
        r={radius - strokeWidth / 2}
        fill="none"
        stroke="#e0e0e0"
        strokeWidth={strokeWidth}
      />
      <circle
        cx={radius}
        cy={radius}
        r={radius - strokeWidth / 2}
        fill="none"
        stroke="#4CAF50"
        strokeWidth={strokeWidth}
        strokeDasharray={circumference}
        strokeDashoffset={strokeDashoffset}
        transform={`rotate(-90 ${radius} ${radius})`}
      />
    </svg>
  );
}

react实现进度条