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>