Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kavindu-mane/react-percentage-bar
✨ React linear and circular percentage progress bars.
https://github.com/kavindu-mane/react-percentage-bar
percentage-bar percentage-circle percentage-progress-circle progress progress-bar progress-circle react react-progress-bar react-progress-circle
Last synced: 16 days ago
JSON representation
✨ React linear and circular percentage progress bars.
- Host: GitHub
- URL: https://github.com/kavindu-mane/react-percentage-bar
- Owner: kavindu-mane
- License: mit
- Created: 2023-04-11T04:54:51.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-02T09:22:40.000Z (8 months ago)
- Last Synced: 2024-11-16T11:16:35.744Z (about 2 months ago)
- Topics: percentage-bar, percentage-circle, percentage-progress-circle, progress, progress-bar, progress-circle, react, react-progress-bar, react-progress-circle
- Language: TypeScript
- Homepage: https://www.kavindu.me/projects/react-percentage-bar
- Size: 591 KB
- Stars: 6
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🚀 React Percentage Bar.
## Installation
_Install with npm:_
```bash
npm i react-percentage-bar
```
_Install with bun:_
```bash
bun add react-percentage-bar
```
_Install with yarn:_
```bash
yarn add react-percentage-bar
```
_Install with pnpm:_
```bash
pnpm add react-percentage-bar
```
## Usage
_Import the progress bar components:_
```javascript
import { CircularProgressBar } from "react-percentage-bar";
import { LinearProgressBar } from "react-percentage-bar";
```
Now you can use both components like bellow.
_Use with default styles:_
```jsx
```
```jsx
```
_Use with props:_
```jsx
```
```jsx
```
## Props
#### _Common props:_
This props are work with both `` and ``.
| 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 `` 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 `` 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 `duration`prop 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.
`` component allows to work with childrens. It's allows to use more than `percentage` and `text` value inside the circular progress bar.
```jsx
```
## License
[](LICENSE)