• Vant React

Circle 环形进度条

介绍

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

引入

import { Circle } from "@taroify/core"

代码演示

基础用法

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

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

  return (
    <Circle percent={70} 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 number | string 100px
color 进度条颜色,传入对象格式可以定义渐变色 string | object #1989fa
layerColor 轨道颜色 string white
fill 填充颜色 string none
speed 动画速度(单位为 rate/s) number | string 0
strokeWidth 进度条宽度 number | string 40
strokeLinecap 进度条端点的形状,可选值为 sqaure butt string round
clockwise 是否顺时针增加 boolean true
children 文字 ReactNode -