Skip to content

Progress 进度条

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

线形进度条 — 百分比外显

⾃线形进度条 — 百分比内显

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

可通过 stroke-width 属性更改进度条的高度,并可通过 text-inside 属性来将进度条描述置于进度条内部。

环形进度条

可通过 type 属性来指定使用环形进度条,在环形进度条中,还可以通过 width 属性来设置其大小。

Props

参数说明类型可选值默认值
percentage百分比(必填)String0-1000%
type进度条类型Stringline/circle-
stroke-width进度条的宽度,单位 pxnumber-6
status进度条当前状态Stringsuccess/danger-
color进度条背景色(会覆盖 status 状态颜色)string--
width环形进度条画布宽度(只在type为circle时可用)number-126
show-text是否显示进度条文字内容boolean-true