如何使用 react-bootstrap 创建动画进度条

进度条用于显示计算机上一个进程的进度。进度条显示进程已完成多少，还剩多少。你可以用以下方法在网页上添加一个进度条

ProgressBar来自’react-bootstrap/ProgressBar

在这篇文章中，我们将学习如何使用Bootstrap类在react中建立一个进度条。

创建React的步骤：要建立一个React应用程序，请遵循以下步骤。

第1步：使用以下命令创建一个反应式应用程序

npx create-react-app foldername

第2步：一旦完成，使用以下命令将你的目录改为新创建的应用程序

cd foldername

第3步：安装Bootstrap的依赖性

npm install bootstrap

运行应用程序的步骤：输入以下命令来运行该应用程序。

npm start

项目结构:

如何使用 react-bootstrap 创建动画进度条？

import Progress from "./Progress";
function App() {
return (
    <div className="App">
      <Progress />
    </div>
  );
}
  
export default App;

import React from "react";
import ProgressBar from 'react-bootstrap/ProgressBar'
function Progress() {
    return (
        <div>
            <h1 style={{ color: 'green' }}>
                <center>GeeksforGeeks</center>
            </h1>
  
            <div class="container">
            <div className="progress-bar bg-primary
                            progress-bar-striped
                            progress-bar-animated"
                            style={{width:'50%'}}>50%</div>
            <br></br>
            <div className="progress-bar bg-success
                            progress-bar-striped 
                            progress-bar-animated" 
                            style={{width:'90%'}}>90%</div>
            <br></br>
            <div className="progress-bar bg-warning 
                            progress-bar-striped
                            progress-bar-animated" 
                            style={{width:'30%'}}>30%</div>
            <br></br>
            <div className="progress-bar bg-danger
                            progress-bar-striped 
                            progress-bar-animated"
                            style={{width:'10%'}}>10%</div>
            <br></br>
            <div className="progress-bar bg-info 
                            progress-bar-striped 
                            progress-bar-animated" 
                            style={{width:'70%'}}>70%</div>
            </div>     
        </div>
    )
}
  
export default Progress;