Folders and files
| Name | Name | Last commit date | ||
|---|---|---|---|---|
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 |