article

Monday, November 8, 2021

ReactJS Progress Bar - Bootstrap Progress Bar

ReactJS Progress Bar - Bootstrap Progress Bar

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
?
1
2
3
4
5
6
7
8
9
//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
?
1
2
3
4
5
6
7
8
9
10
11
12
//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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
//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;

Posted by ednalan at 6:28 PM . Under .

Related Post