Progress 进度条

用于展示操作进度，告知用户当前状态和预期。

直线进度条

进度条内显示百分比标识

百分比不占用额外控件，适用于文件上传等场景。

自定义进度条的颜色

可以通过 color 属性来设置进度条的颜色。该属性可以接受十六进制颜色值，函数和数组。

环形进度条

仪表盘形进度条

您也可以指定 type 属性到 dashboard 使用控制面板进度栏。

自定义内容

动画进度条

Attributes

属性名	说明	类型	可选值	默认值
percentage	百分比，必填	number	(0-100)	0
type	进度条类型	string	line/circle/dashboard	line
stroke-width	进度条的宽度	number	—	6
text-inside	进度条显示文字内置在进度条内（仅 `type` 为 'line' 时可用）	boolean	—	false
status	进度条当前状态	string	success/exception/warning	—
indeterminate	是否为动画进度条	boolean	-	false
duration	控制动画进度条速度	number	-	3
color	进度条背景色进度条背景色（会覆盖 `status` 状态颜色）	string/function/array	—	''
width	环形进度条画布宽度（只在 type 为 circle 或 dashboard 时可用）	number	—	126
show-text	是否显示进度条文字内容	boolean	—	true
stroke-linecap	circle/dashboard 类型路径两端的形状	string	butt/round/square	round
format	指定进度条文字内容	function(percentage)	—	—

Slots

名称	说明
default	自定义内容，参数为 `{ percentage }`

源代码

组件 • 文档

贡献者

Delyan Haralanov

on the field of hope

Pagination 分页