How To Implement A Circular Progress Bar In React

Introduction

This article demonstrates how to create a circular progress bar using reactjs.

Prerequisites

• Basic knowledge of ReactJS
• Visual Studio Code
• Node and NPM installed

Circular Progress Bar in React

To achieve this we need to install a package 'react-circular-progressbar'  and can import it and use it in our sample project.

Step 1. Create a React.js Project

Let's create a new React project by using the following command.

npx create-react-app circular-progress-bar

Step 2. Install NPM dependencies

npm i react-circular-progressbar

Step 3. Create a Component for progress bar

Create a folder for circular progress bar and inside it create a component, 'circularProgressBar.js'. Add the following code to this component.

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

function CircularProgressBar() {
  const [percentage, setPercentage] = useState(0);

  useEffect(() => {
    setTimeout(() => {
      if (percentage < 100) {
        setPercentage(percentage + 1);
      }
    }, 50);
  }, [percentage]);

  return (
    <div style={{textAlign:"center"}}>
      <h4>Circular progress bar in React </h4>
      <div style={{ width: 150, marginLeft: 550}}>
        <CircularProgressbar value={percentage} text={`${percentage}%`} />
      </div>
    </div>
  );
}
export default CircularProgressBar;

Step 4

Add the below code in App.js file

import './App.css';
import CircularProgressBar from './circular-progress-bar/circular-progress-bar';

function App() {
  return (
    <CircularProgressBar/>
  );
}
export default App;

Step 5. Output

Now, run the project by using the 'npm start' command, and check the result.

Summary

In this article, we have discussed how we can create a toast notification functionality in reactjs.