Install bootstrap
npm install react-bootstrap bootstrap@5.1.3
C:\reactdev\myreactdev>npm install react-bootstrap bootstrap@5.1.3
https://react-bootstrap.github.io/getting-started/introduction/
//src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
)
public/index.html
//public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ReactJS </title>
</head>
<body>
<div id="root"></div>
</body>
</html>
src/App.js
src/App.js
//src/App.js
import React, { useEffect, useState } from 'react';
let progressInterval = null;
function App() {
const [progress, setProgress] = useState(0);
useEffect(() => {
progressInterval = setInterval(() => {
setProgress(prev => prev + 1);
}, 100);
}, []);
useEffect(() => {
if (progress >= 100) {
clearInterval(progressInterval);
}
}, [progress]);
return (
<div className="m-5">
<h5 className="mb-3">ReactJS Progress Bar - Bootstrap Progress Bar</h5>
<div className="progress w-50" style={{ height: 30 }}>
<div className="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style={{ width: `${progress}%` }}>{progress}%</div>
</div>
</div>
);
}
export default App;
