sgfswen/progress-arc-component

Simple progress arc for React, customizable with styled-components

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