Taroify

Circle 环形进度条

介绍

圆环形的进度条组件，支持进度渐变动画。

引入

import { Circle } from "@taroify/core"

代码演示

基础用法

percent 属性表示进度条的进度，监听 onChange 事件可以获得动画过程中的实时进度。

function BasicCircle({ percent }: PercentProps) {
  const [currentPercent, setCurrentPercent] = useState(70)

  return (
    <Circle percent={currentPercent} onChange={setCurrentPercent}>
      {currentPercent.toFixed(0)}%
    </Circle>
  )
}

宽度定制

通过 strokeWidth 属性来控制进度条宽度。

<Circle percent={70} strokeWidth={60}>
  宽度定制
</Circle>

颜色定制

通过 color 属性来控制进度条颜色，layerColor 属性来控制轨道颜色。

<Circle percent={70} color="#ee0a24" layerColor="#ebedf0">
  颜色定制
</Circle>

渐变色

color 属性支持传入对象格式来定义渐变色。

<Circle
  percent={70}
  color={{
    "0%": "#3fecff",
    "100%": "#6149f6",
  }}
>
  渐变色
</Circle>

逆时针方向

将 clockwise 设置为 false，进度会从逆时针方向开始。

<Circle percent={70} clockwise={false} color="#07c160">
  逆时针方向
</Circle>

大小定制

通过 size 属性设置圆环直径。

<Circle percent={70} size={120} color="#7232dd">
  大小定制
</Circle>

API

Props

参数	说明	类型	默认值
percent	当前进度	number	-
size	圆环直径，默认单位为 `px`	string	`100px`
color	进度条颜色，传入对象格式可以定义渐变色	string \| object	`#1989fa`
layerColor	轨道颜色	string	`white`
fill	填充颜色	string	`none`
speed	动画速度（单位为 rate/s）	number	`0`
strokeWidth	进度条宽度	number	`40`
strokeLinecap	进度条端点的形状，可选值为 `sqaure` `butt` `round`	string	`round`
clockwise	是否顺时针增加	boolean	`true`
startPosition	进度起始位置，可选值为 `left` `right` `top` `bottom`	string	`top`
children	文字	ReactNode	-

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称	默认值	描述
—circle-size	100px $hd*	-
—circle-width	var(—circle-size)	-
—circle-height	var(—circle-size)	-
—circle-color	var(—primary-color)	-
—circle-hover-stroke	var(—circle-color)	-
—circle-layer-stroke	var(—white)	-
—circle-text-padding	0 var(—padding-base)	-
—circle-text-color	var(—text-color)	-
—circle-text-font-weight	var(—font-weight-bold)	-
—circle-text-font-size	var(—font-size-md)	-
—circle-text-line-height	var(—line-height-md)	-