two-part-progress-circle

Lightweight,customizable two part progress indicative circle

Usage no npm install needed!

<script type="module">
  import twoPartProgressCircle from 'https://cdn.skypack.dev/two-part-progress-circle';
</script>

README

Two Part Progress Circle

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

ios screenshot android screenshot

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

//all props
 <TwoPartProgressCircle
    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