0.1.6 • Published 24 days ago
@ray-js/components-ty-progress-circle v0.1.6
English | 简体中文
@ray-js/components-ty-progress-circle
涂鸦风格圆形进度条
Installation
$ npm install @ray-js/components-ty-progress-circle
# or
$ yarn add @ray-js/components-ty-progress-circle
Usage
import ProgressCircle from '@ray-js/components-ty-progress-circle';
export default () => <ProgressCircle />;
Base Usage
<ProgressCircle percent={percent} />
Color Gradient
<ProgressCircle percent={percent} fillColor="linear-gradient(90deg, #FA709A 0%, #FEDD44 100%)" />
Countdown
<ProgressCircle percent={percent} fillColor="linear-gradient(90deg, #FA709A 0%, #FEDD44 100%)">
<Text>{percent}%</Text>
</ProgressCircle>
Custom Track
<ProgressCircle
percent={percent}
trackColor="#000000"
trackWidth="5px"
fillColor="linear-gradient(90deg, #FA709A 0%, #FEDD44 100%)"
>
<Text>{percent}%</Text>
</ProgressCircle>