Two Part Progress Circle

#### IOS and android compatible, react native progress bar to show two part progress of any process.

Features

- Custom colors
- Spacer option between ring arcs
- Custom size/radius
- Custom ring width
- Custom ring distance from edge
- Custom text styles
- No other dependency other than react native

Prerequisites

react-native

Installation

npm i two-part-progress-circle

Usage

``
import TwoPartProgressCircle from 'two-part-progress-circle';

//default

//all props
categoryOnePercentage={55}
categoryOneColor='#12CC32'
categoryTwoPercentage={20}
categoryTwoColor='#0080ED'
spacer={true}
spacerValue={2}
text="75%"
textColor="black"
textSize={15}
textWeight="500"
circleRadius={60}
distanceFromEdge={3}
ringWidth={2}
/>
``

Props

Name | Description | Type |Default |
--- | --- | --- | --- |
categoryOnePercentage | percentage of first category | Number | 20 |
categoryTwoPercentage | percentage of first category | Number | 50 |
categoryOneColor | color of first category arc | String | #12CC32 |
categoryTwoColor | color of second category arc | String | #0080ED |
circleRadius | size of the progress circle | Number | 60 |
distanceFromEdge | gap between the progress ring and background circle | Number | 3 |
ringWidth | thickness of progress ring | Number | 2 |
spacer | presence or absence of gap between the arcs | Boolean | true |
spacerValue | amount of gap between the arcs | Number | 2 |
text | text to display at the center of the circle | String | 70% |
textSize | size of text | Number | 15 |
textColor | color of text | String | black |
textWeight | font weight of text | String | 500 |

Author

Purnima Naik

Implementation Details

Example

License

MIT