Wondering what’s next for npm?Check out our public roadmap! »

    two-part-progress-circle

    1.2.7 • Public • Published

    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

    Install

    npm i two-part-progress-circle

    DownloadsWeekly Downloads

    36

    Version

    1.2.7

    License

    MIT

    Unpacked Size

    12.7 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar