2.7.0 • Published 4 years ago
progress-arc-component v2.7.0
Simple progress arc for React (demo) 
Installation
$ yarn add progress-arc-componentUsage
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;
`