如何在 ReactJS 中使用 CircularProgress 元件？

---

圓形進度條是任何應用程式中一個具有吸引力的 UI 元素。當我們的應用程式從伺服器獲取資料、使用者上傳檔案或下載資料時，我們可以顯示圓形載入指示器。

在這裡，我們將學習使用各種庫建立圓形進度條的不同方法。

使用 React-circular-progressbar NPM 包

react-circular-progressbar 是一個 NPM 包，我們可以匯入 `circularProgressbar` 元件。它接受 `value` 作為屬性來顯示圓形進度。

使用者應該在終端中執行以下命令，以在 React 應用程式中安裝 react-circular-progressbar NPM 包。

npm i react-circular-progressbar

語法

使用者可以按照以下語法使用 react-circular-progressbar 庫的 `CircularProgressbar` 元件。

<CircularProgressbar value = {40} />;

示例

在下面的示例中，我們將學習如何使用 CircularProgressbar 元件建立一個主要的圓形載入指示器。此外，我們還匯入了來自 `react-circular-progressbar` 庫的樣式。

import React from "react";

import { CircularProgressbar } from "react-circular-progressbar";
import "react-circular-progressbar/dist/styles.css";

function App() {
   return (
      <div>
         <div style = {{ width: "200px" }}>
            <CircularProgressbar value = {40} text = {`${40}%`} />
         </div>
      </div>
   );
}

export default App;

輸出

在輸出中，使用者可以看到完成 40% 的圓形進度元件。

示例

下面的示例將透過在 `CircularProgressBar` 元件中傳遞屬性來自定義圓形進度條。我們將 `maxValue` 設定為 10。因此，這裡的 1 表示 10%，2 表示 20%，依此類推。

此外，它顯示進度是逆時針方向的。此外，我們還增加了描邊寬度和背景填充。如果使用者需要，他們也可以新增自定義 CSS 作為 `styles` 屬性的值。

import React from "react";

import { CircularProgressbar } from "react-circular-progressbar";
import "react-circular-progressbar/dist/styles.css";

function App() {
   return (
      <div>
         <div style = {{ width: "200px" }}>
            <CircularProgressbar
               maxValue = {10}
               strokeWidth = {12}
               value = {6}
               counterClockwise = {true}
               background = {true}
               backgroundPadding = {10}
               text = {`${60}%`}
            />
         </div>
      </div>
   );
}

export default App;

輸出

使用 Material UI 庫建立圓形進度

Materia Ui 庫包含具有不同變體的 CircularProgress 元件。此外，我們還可以使用 Material UI 建立動畫圓形進度條。

使用者應該執行以下命令來安裝 Material UI。

npm install @mui/material @emotion/react @emotion/styled

語法

使用者應該按照以下語法使用 Material UI 庫的 CircularProgress 元件。

<CircularProgress />

示例

在下面的示例中，我們從 Material UI 匯入了 `CircularProgress` 元件，並在 App 元件中使用它。在輸出中，使用者可以看到它顯示了動畫圓形進度條。

import React from "react";
import CircularProgress from "@mui/material/CircularProgress";

function App() {
   return (
      <div>
         <div style = {{ width: "300px", marginLeft: 30 }}>
            <CircularProgress />
         </div>
      </div>
   );
}

export default App;

輸出

示例

在下面的示例中，我們使用了 `setInterval()` 方法，每 500 毫秒將 `progress` 狀態的值更改 5。

import React from "react";
import CircularProgress from "@mui/material/CircularProgress";

function App() {
   const [currentProgress, setProgress] = React.useState(0);
   React.useEffect(() => {
      const timerId = setInterval(() => {
         setProgress((prevProgress) =>
            prevProgress >= 100 ? 0 : prevProgress + 5
         );
      }, 500);
      return () => {
         clearInterval(timerId);
      };
   }, []);
   return (
      <div>
         <div style = {{ width: "300px", marginLeft: 30 }}>
            <CircularProgress variant = "determinate" value = {currentProgress} />
         </div>
      </div>
   );
}

export default App;

輸出

使用者學習瞭如何在 React 應用程式中新增圓形進度條。我們使用了兩個不同的庫來建立圓形進度條。此外，我們還可以使用上述庫在圓形進度條中顯示標籤。