How to implement a circular progress bar in React
Today we will show you how to implement a circular progress bar in React application. Here we will use the NPM Package to implement the circular progress bar.
Checkout more articles on ReactJS
Demo Application
Steps to add a circular progress bar in React
1. Install npm package
Let’s create a react application and install the react-circular-progressbar npm package. Run the following command to install the package.
1 | npm i react-circular-progressbar |
2. Implement a circular progress bar
To add a circular progress bar in the react component, we have to import the package and CSS at the top of the page.
1 2 | import { CircularProgressbar } from 'react-circular-progressbar'; import 'react-circular-progressbar/dist/styles.css'; |
Need to add the following code to render the circular progress bar.
1 2 | const percentage = 66; <CircularProgressbar value={percentage} text={`${percentage}%`} /> |
Let’s add code to the component and gradually increase the percentage and see how it looks.
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 | import React, { useEffect, useState } from 'react'; import { CircularProgressbar } from 'react-circular-progressbar'; import 'react-circular-progressbar/dist/styles.css'; function App() { const [percentage, setPercentage] = useState(0); useEffect(() => { setTimeout(() => { if (percentage < 100) { setPercentage(percentage + 1); } }, 50); }, [percentage]); return ( <div className="app"> <h4>Circular progress bar in React - <a href="https://www.cluemediator.com" target="_blank" rel="noopener">Clue Mediator</a></h4> <div style={{ width: 150, marginLeft: 70 }}> <CircularProgressbar value={percentage} text={`${percentage}%`} /> </div> </div> ); } export default App; |
3. Output
Run the react application and check the output in the browser.
I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂
