如何在React.js中制作动态进度条

使用 React 和循环进度组件构建性能仪表板
在本博客中，我们将探讨如何使用 React 构建性能指标仪表板。仪表板显示不同绩效指标（例如可访问性、SEO 和最佳实践）的循环进度指示器。进度指示器逐渐填满，模拟加载动画。

该项目使用 Tailwind CSS 进行样式设计，并组合了多个组件来创建灵活且可重用的界面。

项目概况
我们将创建两个主要组件：

CircularProgress – 显示给定百分比的圆形进度条。
仪表板 – 显示不同指标的多个进度条，例如性能、可访问性等。
CircularProgress 组件
CircularProgress 组件处理圆形进度条，它以指定的百分比进行动画处理。该组件采用以下属性：

innerCircleColor：圆形进度内的背景颜色。
百分比：完成的百分比。
ProgressColor: 进度条的颜色。
bgColor: 进度区域外的背景颜色。
textColor: 百分比文本的颜色。
title：指标的标题。
代码实现

import React, { useEffect, useRef, useState } from 'react';

interface CircularProgressProps {
  innerCircleColor: string;
  percentage: number;
  progressColor: string;
  bgColor: string;
  textColor: string;
  title: string;
}

const CircularProgress: React.FC<CircularProgressProps> = ({
  innerCircleColor,
  percentage,
  progressColor,
  bgColor,
  textColor,
  title,
}) => {
  const [currentPercentage, setCurrentPercentage] = useState(0);
  const innerCircleRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    const speed = 50; // Speed of the animation
    const increment = () => {
      setCurrentPercentage((prev) => {
        if (prev >= percentage) return percentage;
        return prev + 1;
      });
    };

    const interval = setInterval(increment, speed);

    return () => clearInterval(interval);
  }, [percentage]);

  return (
    <div className='flex flex-col justify-center gap-2'>
      <div
        className="relative flex items-center justify-center w-12 h-12 rounded-full"
        style={{
          background: `conic-gradient(${progressColor} ${currentPercentage * 3.6}deg, ${bgColor} 0deg)`,
        }}
      >
        <div
          className="absolute w-[calc(100%_-_6px)] h-[calc(100%_-_6px)] rounded-full"
          style={{ backgroundColor: innerCircleColor }}
          ref={innerCircleRef}
        ></div>
        <p
          className="relative text-[16px] font-semibold"
          style={{ color: textColor }}
        >
          {currentPercentage}%
        </p>
      </div>
      <p className='text-[10px] font-semibold text-center'>{title}</p>
    </div>
  );
};

export default CircularProgress;

仪表板组件
Dashboard 组件显示 CircularProgress 组件的多个实例，每个实例代表不同的性能指标。

代码实现

import React from 'react';
import CircularProgress from './CircularProgress';

const Dashboard: React.FC = () => {
  return (
    <div className="bg-white flex flex-col items-center border h-auto w-full xl:px-[14rem] lg:px-[5rem] sm:px-0 py-[5rem] justify-center">
      <div className='w-full border rounded'>
        <div className='py-12 border-b'>
          {/* Performance Metrics */}
          <div className="flex flex-wrap justify-center gap-14 items-center">
            <CircularProgress
              innerCircleColor="Bisque"
              percentage={99}
              progressColor="DarkOrange"
              bgColor="Bisque"
              textColor="DarkOrange"
              title="Performance"
            />
            <CircularProgress
              innerCircleColor="Bisque"
              percentage={96}
              progressColor="DarkOrange"
              bgColor="Bisque"
              textColor="DarkOrange"
              title="Accessibility"
            />
            <CircularProgress
              innerCircleColor="lightgreen"
              percentage={90}
              progressColor="LimeGreen"
              bgColor="lightgreen"
              textColor="LimeGreen"
              title="Best Practices"
            />
            <CircularProgress
              innerCircleColor="Bisque"
              percentage={100}
              progressColor="DarkOrange"
              bgColor="Bisque"
              textColor="DarkOrange"
              title="SEO"
            />
          </div>
        </div>
      </div>
    </div>
  );
};

export default Dashboard;

主页组件
除了进度条之外，仪表板还包括一个可折叠部分，显示有关服务器响应时间的更多详细信息。

代码实现

 import React, { useState } from 'react';
import { IoIosArrowDown, IoIosArrowUp } from 'react-icons/io';

const Home: React.FC = () => {
  const [isExpanded, setIsExpanded] = useState(false);

  const handleToggle = () => {
    setIsExpanded(!isExpanded);
  };

  return (
    <div className="rounded-md w-full mb-4" id="server-response-time">
      <div className="flex flex-col border w-full justify-between items-center text-sm text-red-600">
        <div className="flex items-center p-3 justify-between w-full">
          <span className="ml-2 text-gray-800">
            <span className="text-red-700">⚠️</span> Reduce initial server response time <span className="text-red-500">— Root document took 820 ms</span>
          </span>
          <span className="text-gray-800 cursor-pointer" onClick={handleToggle}>
            {isExpanded ? <IoIosArrowUp /> : <IoIosArrowDown />}
          </span>
        </div>
        {isExpanded && (
          <div className="bg-white border-t border-t-blue-600">
            <div className="py-8 pl-12 pr-4">
              <p className="text-[13px] text-gray-700">
                Learn more about server response time and performance optimizations.{' '}
                <a className="text-blue-500 underline" href="#" target="_blank" rel="noopener noreferrer">
                  Read more.
                </a>
              </p>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default Home;

结论
此性能仪表板展示了如何在 React 中创建可重用的动画循环进度组件。通过以这种方式构建仪表板，您可以轻松扩展它以跟踪其他性能指标或将其集成到更广泛的应用程序中，使其成为可视化关键指标的强大工具。

请随意根据您的项目调整此代码，并享受使用 React 创建性能仪表板！

以上是如何在React.js中制作动态进度条的详细内容。更多信息请关注PHP中文网其他相关文章！