🚀 React Percentage Bar.

Installation

Install with npm:

npm i react-percentage-bar

Install with bun:

bun add react-percentage-bar

Install with yarn:

yarn add react-percentage-bar

Install with pnpm:

pnpm add react-percentage-bar

Usage

Import the progress bar components:

import { CircularProgressBar } from "react-percentage-bar";
import { LinearProgressBar } from "react-percentage-bar";

Now you can use both components like bellow.

Use with default styles:

<CircularProgressBar/>

<LinearProgressBar/>

Use with props:

<CircularProgressBar
 size={"2rem"}
 radius={"10rem"}
 roundLineCap={false}
 styles="separators"
 text={"Python"}
/>

<LinearProgressBar
 percentage={90}
 percentagePosition={"onright"}
 text={"Python"}
 percentageColor={"white"}
/>

Props

Common props:

This props are work with both <CircularProgressBar/> and <LinearProgressBar/>.

Name	Description	Default	Req. Data Types
text	Text to display inside the component.	null	string
textStyle	Add Custom styles for styling the text value.	null	object
percentage	Percentage of the progress bar.	75	number
showPercentage	Percentage value show or not inside component.	true	boolean
color	Color or color gradient of progress bar.	#0ea5e9	string or string array
trackColor	Color of the progress bar track.	#efefef	string
duration	Forward animation total duration in ms. 1% get duration / 100	2000	number
animation	Progress bar animated or not.	true	boolean
percentageAnimation	Presentage value animated or not.	true	boolean
roundLineCap	Progress bar start and end points rounded or not.	true	boolean

LinearProgressBar only props:

This props are work with only <LinearProgressBar/> components.

Name	Description	Default	Req. Data Types
percentageColor	Color of the percentage value.	#00235B	string
width	Maximum width (100%) of the progress bar.★	20rem	string or number
height	Height of the progress bar.★	0.8rem	string or number
percentagePosition	Percentage value show position.★★	right	string
startDirection	Progress bar 0% based direction.Value must be a left or right	left	string

❇️ NOTE :

★ All measurements must be one of number , em , px , rem value.
★★ Value must be one of left , right , onleft or onright

CircularProgressBar only props:

This props are work with only <CircularProgressBar/> components.

Name	Description	Default	Req. Data Types
radius	Radius value of the progress circle.★	5rem	string or number
styles	Progress circle style.★★	solid	string
size	Progress circle stroke width.★	1rem	string or number
startPosition	Progress circle 0% based position (0 is top most point). + values clockwisely and - values anti-clockwisely change the start position.	0	string or number
shadow	Shadows add or not for progress circle.	false	boolean
innerShadowStyle	Add Custom styles for progress circle inside shadow.	null	object
outerShadowStyle	Add Custom styles for progress circle outside shadow.	null	object
percentageStyle	Add Custom styles for percentage value.	null	object
reverse	Progress circle reverse animation add or not.	true	boolean
reverseDuration	Duration of the reverse animation.(follow durationprop constraints)	2000	number
loopCount	Progress circle animations iterations count.	0	number or Infinity
startDelay	Forward animation start delay. (Not affect to 1st iteration)	100	number
reverseDelay	Backward animation start delay.	100	number
antiClockWise	Progress circle forward direction is anti-clockwise or not.	false	boolean
padding	Gap between progress circle and background circle.	0	string or number
backgroundColor	Color of the background circle.	transparent	string
separator	If styles is separators , customize separators width , count and color.✦	[5, 12, "#fff"]	array
chartValue	If styles is pie-chart , customize sections end percentages and color.✦✦	{ 20: "#9CB4CC", 60: "#0EA293", 100: "#FFA559" }	object

❇️ NOTE :

★ All measurements must be one of number , em , px , rem value.
★★ Value must be one of solid , pie-chart or separators
✦ Separator require array follow this format [width , count , color]
✦✦ chartValue require object follow this format {percentage-1:color , percentage-2:color}

CircularProgressBar with children.

<CircularProgressBar/> component allows to work with childrens. It's allows to use more than percentage and text value inside the circular progress bar.

<CircularProgressBar>
    <ChildrenComponent/>
<CircularProgressBar/>

License