如何在ReactJS中显示LinearProgress

线性进度条经常用于在应用程序中显示下载和上传的百分比。我们可以使用线性进度条显示上传或下载完成的百分比。此外，它通过动画显示进度，提升了应用程序的用户体验。

在本教程中，我们将学习如何使用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>
   );
}

输出

如何在ReactJS中显示LinearProgress

示例

在下面的示例中，我们展示了带有线性进度的标签。在标签上显示完成百分比。我们使用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中显示LinearProgress

在ReactJS中创建自定义的LinerProgress进度条

我们可以使用HTML和CSS创建线性进度条。然后，我们可以使用React hooks使其在进度百分比更新时具有动画效果。

语法

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

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

在上述语法中，我们添加了一个宽度属性到样式中以改变进度条的进度。

示例

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

文件名 – 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;
}