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;
`