Simple progress arc for React (demo) 
Installation
$ yarn add progress-arc-component Usage
import ProgressArc from 'progress-arc-component' <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:
import styled from 'styled-components' const StyledProgressArc = styled(ProgressArc)` height: 12em; width: 12em; border: 0.3em solid black; border-radius: 0.5em; padding: 1em; `
