如何在ReactJS中显示线性进度条？

---

线性进度条通常用于显示应用程序中的下载和上传百分比。我们可以使用线性进度条来显示上传或下载完成的百分比。此外，它还可以通过动画显示进度，从而改善应用程序的用户体验。

在本教程中，我们将学习如何使用Material UI进度条和自定义进度条来显示线性进度。

使用Material UI在ReactJS中显示LinearProgress进度条

用户可以在React应用程序中使用以下命令安装Material UI库。

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

安装Material UI库后，用户需要从中导入LinearProgress组件并在应用程序中使用它。

语法

用户可以按照以下语法使用Material UI库的LinearProgress组件来显示线性进度条。

<LinearProgress /> 

示例

在下面的示例中，我们从material UI库导入了LinearProgress组件。之后，我们在App()组件中使用了它。

用户可以观察到，输出显示一个持续动画的进度条。

import * as React from "react";
import Box from "@mui/material/Box";
import LinearProgress from "@mui/material/LinearProgress";
export default function App() {
   return (
      <div style = {{width:"700px"}}>
         <h2>
            {" "}
            Using the <i> Material UI </i> to show a linear progress bar in ReactJS
         </h2>
         <Box sx = {{ width: "100%" }}>
            <LinearProgress />
         </Box>
      </div>
   );
}

输出

示例

在下面的示例中，我们显示带有线性进度的标签。我们在标签上显示完成百分比。我们使用了`determinate`作为`variant`属性的值，它根据百分比显示进度。

为了更新进度条的百分比，我们使用了`useEffect()`钩子。在钩子中，我们使用`setInterval()`方法设置计时器。它每500毫秒将进度增加10。我们使用了`setPercantage()`函数，该函数将带有先前进度的回调函数作为参数来更新进度。

import * as React from "react";
import LinearProgress from "@mui/material/LinearProgress";
import Box from "@mui/material/Box";
export default function App() {
   const [currentPercentage, setPercentage] = React.useState(10);
   React.useEffect(() => { 
      const timer = setInterval(() => {
         setPercentage((prevProgress) =>
            prevProgress >= 100 ? 10 : prevProgress + 10
         );
      }, 500);
      return () => {
         clearInterval(timer);
      };
   }, []);
   return (
      <div style = {{ width: "700px" }}>
         <h2>
            {" "}
            Using the <i> Material UI </i> to show a linear progress bar with a label in ReactJS
         </h2>
         <Box sx = {{ display: "flex", alignItems: "center" }}>
            <Box sx = {{ width: "100%", mr: 1 }}>
               <LinearProgress variant="determinate" value={currentPercentage}/>
            </Box>
            {`${Math.round(currentPercentage)}%`}
         </Box>
      </div>
   );
}

输出

在ReactJS中创建自定义线性进度条

我们可以使用HTML和CSS创建线性进度条。之后，我们可以使用React钩子使其在进度百分比更新时进行动画。

语法

用户可以按照以下语法创建自定义进度条并更新其进度。

<div className = "mainDiv">
   <div className = "childDiv" style = {{ width: `${progress}%` }}>
      <span> </span>
   </div>
</div> 

在上面的语法中，我们在样式中添加了一个`width`属性来更改进度。

示例

在下面的示例中，我们实现了自定义线性进度条。

文件名 – App.js

在下面的文件中，我们添加了HTML来创建进度条，并根据进度状态的值更改了进度条的宽度。我们在`setProgress`函数的回调函数的参数中获取当前进度值，然后向当前进度值添加1到10之间的任意值。

此外，如果进度超过1，我们将进度设置为1。

import * as React from "react";
import "./App.css";
export default function App() {
   const [progress, setProgress] = React.useState(10);
   React.useEffect(() => {
      const timer = setInterval(() => {
         setProgress((currentProgress) =>
            currentProgress >= 100 ? 1 : currentProgress + Math.random() * 10
         );
      }, 800);
      return () => {
         clearInterval(timer);
      };
   }, []);
   return (
      <div style = {{ width: "700px" }}>
         <h2>
            {" "}
            Creating the <i> custom linear progress bar </i> in ReactJS
         </h2>
         <div className = "mainDiv">
            <div className = "childDiv" style = {{ width: `${progress}%` }}>
               <span> </span>
            </div>
         </div>
      </div>
   );
} 

文件名 – App.css

在下面的文件中，我们实现了一些CSS来创建线性进度条。

.mainDiv { 
   height: 1rem;
   width: 500px;
   background-color: whitesmoke;
   border-radius: 12px;
   margin: 1rem;
}
.childDiv {
   height: 100%;
   background-color: red;
   border-radius: 12px;
   text-align: left;
}

输出

在本教程中，我们学习了如何在ReactJS中创建线性进度。我们学习了如何使用Material UI库来创建线性进度条。此外，在使用线性进度条时，我们还可以更改进度条的变体。

此外，我们还使用HTML和CSS创建了自定义进度条。用户应根据需要使用自定义线性进度条。