React简易弧形进度条 - progress-arc-component

2017-01-09      39      JavaScript
项目简介

React简易弧形进度条

安装

$ yarn add progress-arc-component

使用方法

import ProgressArc from 'progress-arc-component'

<ProgressArc value={63}/>

Properties

Name Description Default
value 当前进度 0
max 最大值 100
unit 值单元 %
arcColor 弧形进度颜色 #818a91
arcBackgroundColor 弧形背景颜色 #eceeef
textColor 文本颜色 #818a91
textVisible 在弧形中显示颜色 true
radius 弧形角度 90
rounded 绘制圆角 false

自定义

ProgressArc 生成SVG :

import styled from 'styled-components'

const StyledProgressArc = styled(ProgressArc)`
  height: 12em;
  width: 12em;
  border: 0.3em solid black;
  border-radius: 0.5em;
  padding: 1em;