# LineProgress 线性进度条

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

# 平台差异说明

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

# 示例

# 基础用法

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

可以通过 width 和 height 设置进度条宽高。

<pi-line-progress width="200" percent="40" />
<pi-line-progress percent="50" />
<pi-line-progress percent="60" :round="false" />
<pi-line-progress height="30" percent="70" />

1
2
3
4

# 百分比显隐

show-percent 属性控制百分比是否内显。

<pi-line-progress width="200" percent="40" />
<pi-line-progress percent="50" />
<pi-line-progress percent="60" :round="false" :show-percent="false" />
<pi-line-progress height="30" percent="70" :show-percent="false" />

1
2
3
4

# 自定义颜色

activeColor 和 inactiveColor 可以设置激活和未激活状态的颜色。

<pi-line-progress width="200" percent="40" />
<pi-line-progress active-color="red" percent="50" />
<pi-line-progress
  inactive-color="black"
  percent="60"
  :round="false"
  :show-percent="false"
/>
<pi-line-progress
  active-color="green"
  inactive-color="red"
  height="30"
  percent="70"
  :show-percent="false"
/>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 条纹、动态效果

使用 striped 增加条纹样式，而 striped-active 参数配置条纹是否具有动态效果。

现不可与 activeColor 混用。

<pi-line-progress percent="100" striped />
<pi-line-progress percent="100" striped striped-active />
<pi-line-progress active-color="green" percent="100" striped striped-active />

1
2
3

# API

# LineProgress Props

名称	描述	类型	必选	默认值
customStyle	自定义样式	`Object`	`false`	-
customClass	自定义样式类	`String`	`false`	-
round	两端是否半圆	`Boolean`	`false`	true
activeColor	激活部分的颜色（不设置默认为主题色）	`String`	`false`	''
inactiveColor	未激活底色	`String`	`false`	'#ebeef5'
percent	进度百分比，数值	`String \| Number`	`false`	0
showPercent	是否在进度条内部显示百分比的值	`Boolean`	`false`	true
percentStyle	当showPercent为true，设定百分比的样式	`Object`	`false`	-
width	进度条的宽度，单位rpx	`String \| Number`	`false`	0
height	进度条的高度，单位rpx	`String \| Number`	`false`	20
striped	是否显示条纹	`Boolean`	`false`	false
stripedActive	条纹是否具有动态效果	`Boolean`	`false`	false

# LineProgress Slots

名称	描述	插槽内容
default	-	-

← Divider 分割线 CircleProgress 环形进度条 →