How to create circle progress bar in react js?

Hi Friends 👋,

Welcome To aHoisting!

To create circle progress bar in react js, you can use 'react-circular-progressbar' package to circle progress bar in react js.

Today, I am going to show you, how to create circle progress bar in react js.

Installation

Install the following packages to use react-circular-progressbar in react js.

npm

npm install --save react-circular-progressbar

yarn

yarn add react-circular-progressbar

Table of contents

• Install and create a new React app.
• Import react component.
• Create a Component.

Let’s start with the first step.

Step 1: Install and create a new React app.

First you have to install the React project. You should use create-react-app command to create a new React project.

npx create-react-app my-app
cd my-app
npm start

Step 2: Import react component.

After installing, you have to import your React component.

import React, { useEffect, useState } from 'react';
import { CircularProgressbar } from 'react-circular-progressbar';
import 'react-circular-progressbar/dist/styles.css';

Step 3: Create a Component.

You can use <CircularProgressbar/> to create circle progress bar in react js.

<div className="app">
  <div style={{ width: 150, marginLeft: 70 }}>
    <CircularProgressbar value={percentage} text={`${percentage}%`} />
      </div>
</div>

Create circle progress bar example.

The below code is an example of a React. You have to import react-circular-progressbar and use 'react-circular-progressbar' package to create circle progress bar in react js.

App.js

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">
      <div style={{ width: 150, marginLeft: 70 }}>
        <CircularProgressbar value={percentage} text={`${percentage}%`} />
      </div>
    </div>
  );
}

export default App;

In the above code example, I have used the 'react-circular-progressbar' to create circle progress bar in react js.

Check the output of the above code.

All the best 👍