总览

Progress 进度展示器

可视化方式展示用户操作的当前进度和状态。

Progress 进度指示器

何时使用

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

  • 操作在后台运行，需要耗费一定的客户端等待时间。

  • 操作需要展示一个完成进度的百分比。

50%
50%

基本进度条

普通模式的进度条，通过 percent 属性指定进度，通过 textRender 控制右侧文本信息的展示， 通过 hasBorder 属性设置组件是否包含边框。

30%
  
50%
  

圆形进度条

通过 shape 属性可以改变进度指示器的外观，当取值为 circle 时为圆形进度条。

50%
50%
50%
50%
50%
  
50%
  
50%
  
50%
  

进度条不同状态

用户可以通过 state 属性自定义当前进度的展现状态，可取值为 normal, success,warning, error 分别表示普通、成功、失败这三种状态。

  
  
  

自定义百分比信息

textRender 控制百分比信息的展示,通过自定义textRender个性化百分比渲染. 下面给一个 百分比进度取 2 位,当达到 100%是显示 Icon 的 progressbar.

API

Progress

参数说明类型默认值
size尺寸

可选值:
'medium', 'large'		Enum'medium'
shape形态

可选值:
'circle', 'line'		Enum'line'
percent所占百分比Number0
state进度状态, 显示优先级: color > progressive > state

可选值:
'normal', 'success', 'warning', 'error'		Enum'normal'
textRender文本渲染函数

签名:
Function(percent: Number, option: Object) => ReactNode
参数:
percent: {Number} 当前的进度信息
option: {Object} 额外的参数
返回值:
{ReactNode} 返回文本节点
Functionpercent => ${Math.floor(percent)}%