Circular Dashed Progress React

This is zero dependency dashed circular progress bar component in React. It generates a dashed circular progress indicator using SVG.

Usage

Examples:

import CircularProgressBar from "./index";

<CircularProgressBar selectedValue={8} />

<CircularProgressBar
    selectedValue={25}
    maxValue={50}
    textColor='#f00'
    activeStrokeColor='#cc6600'
    withGradient
/>

<CircularProgressBar
    selectedValue={75}
    maxValue={100}
    radius={100}
    activeStrokeColor='#0f4fff'
    withGradient
/>

<CircularProgressBar
    selectedValue={55}
    maxValue={90}
    radius={80}
    activeStrokeColor='#cc6633'
    withGradient
    anticlockwise
/>

Properties

Prop	Description	Default
`maxValue`	Max Value of the `progress`.	`10`
`selectedValue`	Selected Value of the `progress`.	`0`
`radius`	Radius of the Circular Progress Bar.	`60`
`strokeWidth`	Stroke Width of the progress.	`6`
`label`	This is any label that needs to be shown below the progress number.	“
`labelFontSize`	Font Size for Label.	`#000`
`activeStrokeColor`	Active Stroke.	`#05a168`
`inactiveStrokeColor`	Inactive Stroke Color.	`#ddd`
`backgroundColor`	Background Color inside the progress circle.	`#fff`
`textColor`	Color of the Number Text, which shows the active number.	`#000`
`valueFontSize`	Font Size of the number Text.	“
`withGradient`	Whether to apply gradient on the outer Progress bar.	`false`
`anticlockwise`	Whether progress bar in Clockwise or not (default: Clockwise).	`false`
`initialAngularDisplacement`	Any initial Angular Displacement.	`0`

GitHub

View Github