环形进度条

环形进度条组件。

基础使用

通过 percent 属性设置进度条的进度。

<template>
	<pure-circle-progress percent="50"></pure-circle-progress>
</template>

大小

通过 size 属性自定义进度条尺寸（宽、高）。

<template>
	<pure-circle-progress
		percent="50"
		size="150px"
	></pure-circle-progress>
</template>

粗细

通过 stroke-width 属性自定义进度条的粗细。

<template>
	<pure-circle-progress
		percent="50"
		stroke-width="2px"
	></pure-circle-progress>
</template>

颜色

• 通过 inactiveColor 属性自定义进度条的轨道颜色。
• 通过 activeColor 属性自定义进度条的进度颜色。

<template>
	<pure-circle-progress
		percent="50"
		inactiveColor="#9900ff"
		activeColor="#00ff99"
	></pure-circle-progress>
</template>

进度文字

通过 pivotText 属性设置进度条的进度文字。

<template>
	<pure-circle-progress
		percent="50"
		pivot-text="自定义文字"
	></pure-circle-progress>
</template>

属性

名称	类型	默认值	说明
percent	[Number, String]	0	进度值
size	String	160rpx	大小
strokeWidth	String	16rpx	粗细
inactiveColor	String	#DEDEDE	轨道颜色
activeColor	String	#2080f0	进度条颜色
trackColor	String	--pure-background-deep	轨道颜色
pivotText	String	百分比	进度文字内容
showPivot	Boolean	true	是否显示进度文字
zeroDot	Boolean	false	是否显示零进度点

插槽

名称	参数	说明
#default	percent: 动画进度值	默认，进度文字内容