This is zero dependency dashed circular progress bar component in React. It generates a dashed circular progress indicator using SVG.
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 />| 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 |