ReactJS 如何创建进度条

我们可以使用进度条来跟踪某项任务完成的百分比。也许你在许多网站上看到过上传文件时的进度条，这是进度条的一个最佳用例，它显示了上传文件的百分比。

进度条的另一个最佳用例是显示下载完成的百分比。我们可以为进度条使用不同的CSS样式来制作动画并改善用户体验。

在本教程中，我们将学习如何在ReactJS中使用库和从头开始创建一个进度条。

使用ranmonak库的react-progress-bar组件

ranmonak NPM包中的react-progress-bar组件允许我们在react应用中添加一个进度条。用户需要在终端执行以下命令，在当前的react应用中安装ranmonak库。

npm i @ramonak/react-progress-bar

语法

用户可以按照下面的语法来使用 react-progress-bar 创建进度条。

import ProgressBar from "@ramonak/react-progress-bar";
<ProgressBar completed={50} bgColor="grey" animateOnRender={true} />

我们在上面的语法中从ramonak/react-progress-bar导入了ProgressBar组件。

例子

在下面的例子中，我们使用了ProgressBar组件来创建一个进度条。此外，我们还通过道具来定制进度条。我们使用了bgColor道具来改变进度条的背景颜色。我们可以把进度条的百分比作为完成度道具的值传递给它。

animateOnRender道具允许我们对进度条进行动画处理。isLabelVisible允许我们显示和隐藏进度条上的标签。

import React from "react";
import ProgressBar from "@ramonak/react-progress-bar";
export default function App() {
   const mainDiv = {
      width: "600px",
   };
   return (
      <div style = {mainDiv}>
         <h3>
            {" "}
            Creating the progress bar using the <i> react-progress-bar component of the ranmonak library </i> in ReactJs
         </h3>
         <ProgressBar completed = {50} bgColor = "grey" animateOnRender = {true} />
         <br></br>
         <ProgressBar completed = {30} bgColor = "green" isLabelVisible = {false} />
         <br></br>
         <ProgressBar completed = {90} bgColor = "red" animateOnRender = {true} isLabelVisible = {false} />
         <br></br>
         <ProgressBar completed = {90.1} bgColor = "black" />
         <br></br>
         <ProgressBar completed = {90.3} animateOnRender = {true} />
      </div>
   );
}

输出

如何在ReactJS中创建进度条？

使用 react-bootstrap 的 ProgressBar 组件

react-bootstrap库包含ProgressBar组件，我们可以把它导入到应用程序中，使用道具来定制进度条。

用户可以使用下面的命令在应用程序中安装 react-bootstrap 和 bootstrap 库。

npm install react-bootstrap bootstrap

语法

用户可以按照下面的语法来使用 reactbootstrap 库中的 ProgressBar 组件。

<ProgressBar now={70} label={`70% completed`} animated />

在上面的语法中，我们通过’now’这个道具来显示进度条中的百分比。

例子

在下面的例子中，我们从react-bootstrap导入了ProgressBar组件，并从Bootstrap库导入了CSS。之后，我们通过向ProgressBar组件传递各种道具来创建多个进度条。

animated “道具允许我们对进度条进行动画处理。我们可以将完成的百分比作为’now’属性的值传递。此外，我们还使用了标签道具来向进度条传递标签。

import React from "react";
import { ProgressBar } from "react-bootstrap"; 
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
   const mainDiv = {
      width: "400px",
      textAlign: "center",
   };
   return (
      <div>
         <h4>
            {" "}
            Creating the progress bar using the{" "}<i> ProgressBar component of react-bootstrap NPM package </i> in  ReactJs
         </h4>
         <br></br>
         <div style = {mainDiv}>
            <ProgressBar now = {50} label = {`50% completed`} />
            <br></br>
            <ProgressBar now = {70} label = {`70% completed`} animated />
            <br></br>
            <ProgressBar now = {30} label = {`30% completed`} variant = "success" />
         </div>
      </div>
   );
}

输出

如何在ReactJS中创建进度条？

在ReactJS中从头开始创建一个进度条

我们可以使用HTML和CSS在ReactJS中从头开始创建进度条。我们可以使用两个嵌套的div来创建一个进度条，并添加CSS来定制进度条。

语法

用户可以按照下面的语法在ReactJS中从头开始创建一个进度条。

<div class = "mainDiv">
   <div class = "childDiv"></div>
</div>

在上面的语法中，mainDiv作为一个进度条工作。我们可以将宽度设置为等于childDiv的完成百分比。

例子

文件名 – App.js

在下面的文件中，我们创建了具有 “mainDiv “类名称的 div，并添加了具有 “childDiv “类名称的另一个 div。此外，我们还在childDiv中添加了元素，为进度条设置了一个标签。

import React from "react";
import "./App.css";
export default function App() {
   return (
      <div>
         <h3>
            {" "}
            Creating the progress bar using the <i> HTML and CSS </i> in ReactJs
         </h3>
         <br></br>
         <div class = "mainDiv">
            <div class = "childDiv">
               <span class = "text"> 60% </span>
            </div>
         </div>
      </div>
   );
}

文件名 – App.css

在下面的文件中，我们给出了mainDiv的宽度。同时，我们还对进度条应用了一些CSS。在childDiv中，我们设置了60%的宽度，显示60%的完成率。

.mainDiv {
   height: 2rem;
   width: 500px;
   background-color: whitesmoke;
   border-radius: 12px;
   margin: 1rem;
}
.childDiv {
   height: 100%;
   width: 60%;
   background-color: green;
   border-radius: 12px;
   text-align: left;
}
.text {
   color: white;
   padding-left: 30px;
   font-size: 1.4rem;
   font-weight: 700;
}