如何在 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 应用程序中添加圆形进度条。我们使用了两个不同的库来创建圆形进度条。此外，我们还可以使用上述库在圆形进度条中显示标签。