如何在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中文網其他相關文章！