Simple progress arc for React (demo)
$ yarn add progress-arc-component
import ProgressArc from 'progress-arc-component'
<ProgressArc value={63}/>
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 |
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;
`