fancyprogressbar v1.0.8

FancyProgressBar

Check out the react component storybook at - https://dlucidone.github.io/fancyprogressbar.github.io

Installation

$ npm i fancyprogressbar

How to use

import FancyProgressBarComponent from "fancyprogressbar";

 <FancyProgressBarComponent
    id={"1"} // Unique if you have multiple
    gradientStartColor={"#429321"} // Gradient start color
    gradientStopColor={"#87d005"} // Gradient Stop color

    // keep both start and stop color same for one color

    innerCircleStroke={"lightgray"} // Inner circle Color
    filledPercent={78} // Percentage completed total
    textCenterValue={"70%"} // Text in center
    textCenterColor={"#000000"} // Text in center color
    textCenterStroke={0.5} // Text in center stroke
    width={"200"} // Width of progress bar
    height={"200"}  // Height of progress bar
    innerCircleStrokeWidth={"4"} // Inner circle progress bar width
    outerCircleStokeWidth={"5"} // Outer circle progress bar width
    showCentertext={false} // Center text display or not
    // camparisonProgressBar={true} // Enable comparison progress bar
    // showSubtitleCenterText={true} // Show subtitle text
    // textSubtitleCenterColor={"gray"} // subtitle color
    // innerFilledPercent={this.state.innerFilledPercent} // filled percent of inner circle
    // textSubtitleCenterValue={this.state.innerFilledPercent + "%"} // text for the inner circle
/>