How To Add Bootstrap Progress Bar In ReactJs

In this article, we will learn how to add a bootstrap progress bar in reactjs.

–First of all, we have create react application.

-Then import the bootstrap package in your project.

npm i bootstrap

-Now open your app.js file and add the below code:

import Reac,{useState} from 'react'

function App() {
    
    const [percentage, setPercentage] = useState('10');

    return (
        <>
            <h1>{percentage}%</h1>
            <input type='number' onChange={(e) => setPercentage(e.target.value)} />
            <div class="progress">
                <div class="progress-bar bg-success-custom" role="progressbar" style={{ width: `${percentage}%`, height: '4px' }}
                    aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </>
    )
}

– We have set the progress bar values using the input field. when we change the input value, the value set in the percentage state.
– We have set the percentage value in the progress bar using style. So when the value changes progress bar changes.

output: