Progress进度条

展示操作的当前进度。

何时使用 #

在操作需要较长时间才能完成时,为用户显示该操作的当前进度和状态。

  • 当一个操作会打断当前界面,或者需要在后台运行,且耗时可能超过2秒时;

  • 当需要显示一个操作完成的百分比时。

代码演示

标准的进度条。

适合放在较狭窄的区域内。

会动的进度条才是好进度条。

format 属性指定格式。

圈形的进度。

小一号的圈形进度。

会动的进度条才是好进度条。

API

属性 说明 类型 默认值
nzType 类型,可选 linecircle String line
ngModel 百分比 Number 0
nzFormat 内容的模板函数 function(percent) percent => percent + '%'
nzStatus 状态,可选:successexceptionactive String
nzShowInfo 是否显示进度数值或状态图标 Boolean true
nzStrokeWidth (nzType='line') 进度条线的宽度,单位 px Number 10
nzStrokeWidth (nzType='circle') 圆形进度条线的宽度,单位是进度条画布宽度的百分比 Number 6
nzWidth (nzType='circle') 圆形进度条画布宽度,单位 px Number 132