React - 创建简单的动画进度条

GenAI LIVE! | 2025年6月4日

你好！👋😊

今天我想向大家展示我最近在 React 中制作的一个简单动画进度条。

在开始之前，我强烈建议您查看我们网站上的解决方案的可运行示例：
React - 创建简单的动画进度条

本帖最终效果：

下面我向您介绍一个带有一些样式的简单进度条的解决方案📊🎨。

在这个解决方案中我使用：

useState用于存储进度条状态的钩子，
根据容器的百分比来衡量内容width- 这个技巧让我们可以轻松地显示从 0％到 100％的进度，
一些触发方法的示例按钮setProgress()来演示进度条如何工作（切换之间的动画有很好的效果）。

实际示例：

import React from 'react';

const containerStyle = {
    border: '1px solid silver',
    background: '#ededed'
};

const contentStyle = {
    background: '#00cc00',
    height: '24px',
    textAlign: 'center',
    lineHeight: '24px',
    fontFamily: 'sans-serif',
    transition: '0.3s'
};

const ProgressBar = ({progress}) => {
    const state = `${progress}%`;
    return (
      <div style={containerStyle}>
        <div style={{...contentStyle, width: state}}>
          {progress > 5 ? state : ''}
        </div>
      </div>
    );
};

const App = () => {
  const [progress, setProgress] = React.useState(25);
  return (
    <div>
      <ProgressBar progress={progress} />
      <br />
      <div>
        <button onClick={() => setProgress(0)}>0%</button>
        <button onClick={() => setProgress(5)}>5%</button>
        <button onClick={() => setProgress(15)}>15%</button>
        <button onClick={() => setProgress(50)}>50%</button>
        <button onClick={() => setProgress(75)}>75%</button>
        <button onClick={() => setProgress(100)}>100%</button>
      </div>
    </div>
  );
};

export default App;

您可以在此处运行此示例

请在评论区告诉我你的想法！😊💬

写信给我们！✉

如果您有任何问题需要解决，或者有与 React 或 JavaScript 主题相关的无人能解答的问题，或者您正在寻找指导，请在dirask.com -> 问题上写信给我们

鏂囩珷鏉ユ簮锛�https://dev.to/diraskreact/react-create-simple-animated-progress-bar-34j0

React - 创建简单的动画进度条 GenAI LIVE！| 2025 年 6 月 4 日

React - 创建简单的动画进度条

GenAI LIVE! | 2025年6月4日

写信给我们！✉