1. First, we need fresh reactjs setup, and for that, we need to run below commands into out terminal, and also we should have latest node version installed on our system:
npx create-react-app my-awesome-project
cd my-awesome-project
npm start
2. Now we need to run below commands into our project terminal to get bootstrap and related modules into our reactjs application:
npm install [email protected] --save
npm start //For start project again
3. Finally for the main output, we need to add below code into our my-awesome-project/src/App.js file or if you have fresh setup then you can replace my-awesome-project/src/App.js file code with below code:
import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div>
<div class="container">
<div class="text-xs-center" id="example-caption-1">Reticulating splines… <span id="percentage" class="tag tag-default">0</span>%</div>
<div class="parent">
<progress class="progress progress-striped" value="0" max="100"></progress>
<div class="child">
<div class="btn-group" role="group" aria-label="First group">
<button type="button" class="btn btn-outline-secondary" value="25" name="success">25%</button>
<button type="button" class="btn btn-outline-secondary" value="50" name="info">50%</button>
<button type="button" class="btn btn-outline-secondary" value="75" name="warning">75%</button>
<button type="button" class="btn btn-outline-secondary" value="100" name="danger">100%</button>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.2/js/tether.min.js"></script>
</div>
);
}
export default App;
4. Now we need to add below code into our my-awesome-project/src/App.css file :
body{
background:#eee;
}
.progress {
height: 2.3em;
margin-bottom: 0;
}
.btn-group {
width: calc(100% + 3px);
}
.btn-group > .btn {
width: 25%;
}
.btn-group > .btn:focus {
outline: none;
background-color: transparent;
}
.parent {
position: relative;
width: 100%;
background:#fff;
}
.child {
position: absolute;
top: 0;
right: 0;
z-index: 1;
width: 100%;
}