# CircleProgress 环形进度条

显示后台数据加载的过程，例如文件上传与加载

# 平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
√	√	√	√	√	√	√

# 示例

# 基础用法

在 CircleProgress 中设置 percent 即可，值必须在 0 ~ 100当中。

通过 text和width 设置进度条宽度和显示文字。

<pi-circle-progress width="200" :percent="40" />
<pi-circle-progress width="200" :percent="40" text="hello,word" />

1
2

# type配套颜色

可通过type激活配套颜色,分别有success, error, info, primary, warning五个配套

<pi-circle-progress width="200" :percent="40" type="primary" />
<pi-circle-progress width="200" :percent="40" text="hello,word" type="error" />

1
2

# 自定义颜色/字体大小

或者可以通过inactive-color、active-color、bg-color和font-size控制进度条激活进度样式和显示字体大小

<pi-circle-progress
  width="200"
  :percent="40"
  inactive-color="#f5dab1"
  active-color="#e6a23c"
  bg-color="#fdf6ec"
/>
<pi-circle-progress width="200" :percent="40" text="hello,word" font-size="12px" />

1
2
3
4
5
6
7
8

# 自定义半径/进度条宽度

可通过width和border-width控制环形半径已经进度条宽度

<pi-circle-progress width="250" :percent="40" />
<pi-circle-progress width="250" :percent="40" border-width="30" />

1
2

# 环形进度条渐变色

可通过linear-gradient的show属性开启进度条渐变色, colorStop属性设置渐变颜色

<pi-circle-progress
    width="200"
    :percent="40"
    :linear-gradient="{
      show: true,
      colorStop: [
        { percent: 0, value: '#5f0' },
        { percent: 1, value: '#f50' }
      ]
    }"
  />
<pi-circle-progress
    width="200"
    :percent="40"
    :linear-gradient="{
      show: true,
      colorStop: [
        { percent: 0, value: '#CC6699' },
        { percent: 1, value: '#CCFF99' }
      ]
    }"
    text="hello,word"
  />

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# CircleProgress Props

名称	描述	类型	必填	默认值
percent	圆环进度百分比值限制值在0到100之间	`Number`	`true`	50
bgColor	整个圆环进度区域的背景色	`String`	`false`	#FFFFFF
inactiveColor	底部圆环的颜色（灰色的圆环）	`String \| false`	'#ececec'
activeColor	圆环激活部分的颜色	`String`	`false`	'#19be6b'
borderWidth	圆环线条的宽度，单位rpx	`Number \| String`	`false`	14
width	整个圆形的宽度，单位rpx	`Number \| String`	`false`	200
duration	整个圆环执行一圈的时间，单位ms	`Number \| String`	`false`	1500
type	主题类型,有`success`, `error`, `info`, `primary`, `warning`五个类型	`String`	`false`	success
fontSize	字体大小	`String`	`false`	16px
text	显示的文字默认为空	`String`	`false`
linearGradient	圆环进度渐变色，需要通过`show:true`开启，`colorStop`属性接收一个长度为2的数组	`Object`	`false`

← LineProgress 线性进度条 Search 搜索 →