demo)
Simple progress arc for React (Installation
$ yarn add progress-arc-component
Usage
<ProgressArc value=63/>
Properties
Name | Description | Default |
---|---|---|
value | Current progress | 0 |
max | Maximum value | 100 |
unit | Value unit | % |
arcColor | Progress arc color | #818a91 |
arcBackgroundColor | Arc background color | #eceeef |
textColor | Text color | #818a91 |
textVisible | Show text inside arc | true |
radius | Arc radius | 90 |
rounded | Draw rounded corners | false |
Customization
ProgressArc generates SVG that can be tweaked with styled-components:
const StyledProgressArc = ` height: 12em; width: 12em; border: 0.3em solid black; border-radius: 0.5em; padding: 1em;`