react-percentage-bar v1.2.5

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/>.

LinearProgressBar only props:

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

❇️ 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.

❇️ 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