react-svg-circular-progressbar

A circular progress bar in React is a visual component built with SVG that displays the progress of a task or process in the form of a circle. It is often used to indicate the completion status of an operation or to show the progress of a loading task.

Installation

1npm install react-svg-circular-progressbar
2yarn add react-svg-circular-progressbar

Usage

1import CircularProgressBar from "react-svg-circular-progressbar";
2
3<CircularProgressBar
4  size={100}
5  progress={40}
6  rotate={-90}
7  trackWidth={4}
8  trackColor="grey"
9  indicatorWidth={4}
10  indicatorColor="red"
11  indicatorCap="round"
12  className=""
13>
14  {children}
15</CircularProgressBar>;

Props

Name	Type	Default	Description
size	number	100	Circle size
progress	number	40	Progress value
rotate	number	-90	Progress circle rotation
trackWidth	number	4	Track width
trackColor	string	'grey'	Track color
indicatorWidth	number	4	Indicator width
indicatorColor	string	'red'	Indicator color
indicatorCap	string	'round'	Indicator line cap (round, square, butt)
children	node	null	Children - Wrap HTML elements
className	string	''	Progress bar class name