Circle 圆形进度条

使用圆环和动画展示百分比进度。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

App-vue	App-nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

基础用法

<!-- 圆形进度 -->
<fui-circle :percent="70" />

属性

属性	类型	说明	官网默认值
percent	Number / String	进度百分比，范围 0–100	0
width	Number / String	圆环直径，单位 rpx	120
fillStyle	String	画布背景填充色，仅 nvue iOS 支持	#FFFFFF
strokeWidth	Number / String	圆环线宽，单位 px	4
lineCap	String	线端样式：square、round、butt	round
size	Number / String	百分比字号，单位 px	12
color	String	百分比文字颜色	#465CFF
show	Boolean	是否显示百分比文字	true
background	String	圆环底色	#CCCCCC
defaultShow	Boolean	是否显示圆环底色	true
foreground	String	进度圆环颜色	#465CFF
gradient	String	与 foreground 配合使用的渐变色	-
sAngle	Number	起始角度，以 Math.PI * sAngle 计算	0
counterclockwise	Boolean	是否逆时针绘制	false
speed	Number / String	动画速度，范围 1–100	1
activeMode	String	backwards 从头播放，forwards 从上次结束处继续	forwards

事件

事件	说明	回调参数
change	每帧进度变化后触发	{ percent }
end	动画完成时触发	{ canvasId }

插槽

插槽	说明
default	自定义圆环中间的内容

平台说明

gradient 不支持 nvue 和快手小程序。nvue iOS 的 fillStyle 不支持 rgba，透明背景无效。