如何在 ReactJS 中创建进度条?

react jsjavascript libraryfront end technology更新于 2025/2/13 8:44:17

我们可以使用进度条来跟踪特定任务的完成百分比。您可能在上传文件时在许多网站上都看到过进度条，进度条的最佳用例之一是显示文件上传的百分比。

进度条的另一个最佳用例是显示下载完成百分比。我们可以为进度条使用不同的 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 组件创建了进度条。此外，我们还传递了 props 来自定义进度条。我们使用 bgColor props 来更改进度条的背景颜色。我们可以将进度条的百分比作为 completed 属性的值传递。

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>
   );
}

输出

使用 react-bootstrap 的 ProgressBar 组件

react-bootstrap 库包含 ProgressBar 组件，我们可以将其导入到应用程序中，并使用 props 自定义进度条。

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

npm install react-bootstrap bootstrap

语法

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

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

在上述语法中，我们传递了 'now' props 来在进度条中显示百分比。

示例

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

"animated" props 允许我们为进度条添加动画效果。我们可以将完成百分比作为"now"属性的值传递。此外，我们还使用了 label props 将标签传递给进度条。

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 中从零开始创建进度条

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

语法

用户可以按照以下语法在 ReactJS 中从零开始创建进度条。

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

在上述语法中，mainDiv 用作进度条。我们可以将宽度设置为 childDiv 的完成百分比。

示例

文件名 - App.js

在下面的文件中，我们创建了一个类名为"mainDiv"的 div，并添加了另一个类名为"childDiv"的 div。此外，我们在 childDiv 内部添加了 <span> 元素，用于设置进度条的标签。

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;
}