Circle 圆形进度条，用于展现某个任务的当前进度。

支持平台

App（vue）	App（nvue）	H5	小程序
✓	✓	✓	✓

基础使用

通过 percent 属性设置百分比（0~100）。

<wui-circle :percent="80"></wui-circle>

调整样式/渐变

通过 percent 属性设置百分比，color 属性设置百分比字体颜色，background 属性设置进度环默认背景色，foreground 属性设置进度环默认前景色，gradient 属性设置渐变色，width 属性设置进度条宽高，strokeWidth 属性设置进度环宽度，size 属性设置百分比字体大小。

<wui-circle :percent="75" color="#FFB703" background="#eee" foreground="#FFB703" gradient="#FAE845" :width="200" :strokeWidth="6" :size="16"></wui-circle>

Slots

插槽名称	说明
default	百分比区域自定义显示内容

Props

注意：头条（字节）小程序颜色值不支持简写，如：#CCCCCC 不可以简写成#ccc。

属性名	类型	说明	默认值	平台差异说明
percent	Number, String	进度百分比，取值范围：0-100	0	-
width	Number, String	进度条宽高（直径），单位rpx	120	-
fillStyle	String	画布背景填充颜色，Nvue下IOS端设置透明背景无效，不支持rgba	#FFFFFF	仅Nvue且IOS端支持
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 配合使用	-	Nvue端和快手小程序暂不支持
sAngle	Number	进度环动画的开始角度（默认在3点钟方向），Math.PI * sAngle	0	-
counterclockwise	Boolean	设置圆形进度条是顺时针旋转，还是逆时针旋转。true 表示逆时针旋转，false 表示顺时针旋转	false	-
speed	Number, String	动画执行速度，值越大动画越快，可选值：1~100	1	-
activeMode	String	动画执行方式，可选值：backwards（动画从头播）、forwards（动画从上次结束点接着播）	forwards	-

Events

事件名	说明	回调参数
@change	每一个动画帧之后的回调函数	{ percent:百分比 }
@end	进度动画完成事件	{ canvasId:唯一标识符 }

提示

注：若 nvue android端报以下错误，暂时不用处理！

reportJSException >>>> exception function:gcanvas setBackGround for android view,

exception:WX\_RENDER\_ERR\_TEXTURE\_SETBACKGROUND:

TextureView doesn't support displaying a background drawable!