Progress 进度条
用于展示操作进度，告知用户当前状态和预期。
直线进度条
Progress 组件设置 percentage 属性即可，表示进度条对应的百分比。该属性必填，并且必须在 0-100 的范围内。你可以通过设置 format 来自定义文字显示的格式。
export function ProgressBasic() { return ( <div> <ElProgress percentage={50} style={lineStyle} /> <ElProgress percentage={100} format={format} style={lineStyle} /> <ElProgress percentage={100} status="success" style={lineStyle} /> <ElProgress percentage={100} status="warning" style={lineStyle} /> <ElProgress percentage={50} status="exception" style={lineStyle} /> </div> );}
进度条内显示百分比标识
百分比不占用额外空间，适用于文件上传等场景。
Progress 组件可通过 stroke-width 属性更改进度条的高度，并可通过 text-inside 属性来改变进度条内部的文字。
export function ProgressTextInside() { return ( <div> <ElProgress textInside strokeWidth={26} percentage={70} style={lineStyle} /> <ElProgress textInside strokeWidth={24} percentage={100} status="success" style={lineStyle} /> <ElProgress textInside strokeWidth={22} percentage={80} status="warning" style={lineStyle} /> <ElProgress textInside strokeWidth={20} percentage={50} status="exception" style={lineStyle} /> </div> );}
自定义进度条的颜色
可以通过 color 属性来设置进度条的颜色。该属性可以接受十六进制颜色值，函数和数组。
export function ProgressColor() { const [percentage, setPercentage] = useState(20); const customColorMethod = (value: number) => { if (value < 30) return "#909399"; if (value < 70) return "#e6a23c"; return "#67c23a"; }; const increase = () => setPercentage((value) => Math.min(value + 10, 100)); const decrease = () => setPercentage((value) => Math.max(value - 10, 0)); return ( <div> <ElProgress percentage={percentage} color="#409eff" style={lineStyle} /> <ElProgress percentage={percentage} color={customColorMethod} style={lineStyle} /> <ElProgress percentage={percentage} color={COLORS} style={lineStyle} /> <ElProgress percentage={percentage} color={COLORS} style={lineStyle} /> <ElButtonGroup> <ElButton icon={<Minus />} onClick={decrease} /> <ElButton icon={<Plus />} onClick={increase} /> </ElButtonGroup> </div> );}
环形进度条
Progress 组件可通过 type 属性来指定使用环形进度条，在环形进度条中，还可以通过 width 属性来设置其大小。
export function ProgressCircle() { return ( <div> <ElProgress type="circle" percentage={0} style={circleStyle} /> <ElProgress type="circle" percentage={25} style={circleStyle} /> <ElProgress type="circle" percentage={100} status="success" style={circleStyle} /> <ElProgress type="circle" percentage={70} status="warning" style={circleStyle} /> <ElProgress type="circle" percentage={50} status="exception" style={circleStyle} /> </div> );}
仪表盘形进度条
您也可以指定 type 属性到 dashboard 使用控制面板进度栏。
export function ProgressDashboard() { const [percentage, setPercentage] = useState(10); const [percentage2, setPercentage2] = useState(0); useEffect(() => { const timer = window.setInterval(() => { setPercentage2((value) => (value % 100) + 10); }, 500); return () => window.clearInterval(timer); }, []); const increase = () => setPercentage((value) => Math.min(value + 10, 100)); const decrease = () => setPercentage((value) => Math.max(value - 10, 0)); return ( <div> <ElProgress type="dashboard" percentage={percentage} color={COLORS} /> <ElProgress type="dashboard" percentage={percentage2} color={COLORS} /> <div> <ElButtonGroup> <ElButton icon={<Minus />} onClick={decrease} /> <ElButton icon={<Plus />} onClick={increase} /> </ElButtonGroup> </div> </div> );}
自定义内容
export function ProgressCustomText() { return ( <div> <ElProgress percentage={50} style={lineStyle}> {() => <ElButton text>Content</ElButton>} </ElProgress> <ElProgress textInside strokeWidth={20} percentage={50} status="exception" style={lineStyle} > {() => <span>Content</span>} </ElProgress> <ElProgress type="circle" percentage={100} status="success" style={circleStyle} > {() => <ElButton type="success" icon={<Check />} circle />} </ElProgress> <ElProgress type="dashboard" percentage={80}> {(value) => ( <> <span style={{ display: "block", marginTop: 10, fontSize: 28 }} > {value}% </span> <span style={{ display: "block", marginTop: 10, fontSize: 12 }} > Progressing </span> </> )} </ElProgress> </div> );}
动画进度条
使用 indeterminate 属性来设置不确定的进度， duration 来控制动画持续时间。
export function ProgressIndeterminate() { return ( <div> <ElProgress percentage={50} indeterminate style={lineStyle} /> <ElProgress percentage={100} format={format} indeterminate style={lineStyle} /> <ElProgress percentage={100} status="success" indeterminate duration={5} style={lineStyle} /> <ElProgress percentage={100} status="warning" indeterminate duration={1} style={lineStyle} /> <ElProgress percentage={50} status="exception" indeterminate style={lineStyle} /> </div> );}
条纹进度条
通过设置 striped 属性获取条纹进度条。也可以使用 striped-flow 属性来使条纹流动起来。 使用duration 属性来控制条纹流动的速度。
export function ProgressStriped() { const [percentage, setPercentage] = useState(70); const duration = Math.floor(percentage / 10); const increase = () => setPercentage((value) => Math.min(value + 10, 100)); const decrease = () => setPercentage((value) => Math.max(value - 10, 0)); return ( <div style={line}> <ElProgress percentage={50} strokeWidth={15} striped style={lineStyle} /> <ElProgress percentage={30} strokeWidth={15} status="warning" striped stripedFlow style={lineStyle} /> <ElProgress percentage={100} strokeWidth={15} status="success" striped stripedFlow duration={10} style={lineStyle} /> <ElProgress percentage={percentage} strokeWidth={15} status="exception" striped stripedFlow duration={duration} style={lineStyle} /> <ElButtonGroup> <ElButton icon={<Minus />} onClick={decrease} /> <ElButton icon={<Plus />} onClick={increase} /> </ElButtonGroup> </div> );}
Progress API
Progress Attributes
| 属性名 | 说明 | 类型 | 默认值 |
|---|
| type | 进度类型 | enum | line |
| percentage | 百分比，0-100 | number | 0 |
| status | 当前状态 | enum | — |
| stroke-width | 线宽，仅 line 类型有效 | number | 6 |
| stroke-linecap | 线帽 | enum | round |
| text-inside | 文字是否显示在进度条内部 | boolean | false |
| width | 环形进度条画布宽度 | number | 126 |
| show-text | 是否显示文字 | boolean | true |
| color | 进度条颜色，支持单色、分段、函数 | string / array / Function | — |
| duration | 条纹动画周期（秒） | number | 3 |
| striped | 是否应用条纹动画 | boolean | false |
| striped-flow | 是否应用流动效果 | boolean | false |
| indeterminate | 是否为不确定进度 | boolean | false |
| format | 文字格式化函数 | Function | (p) => p + '%' |
Progress Slots
| 插槽名 | 说明 | React 写法 |
|---|
| default | 自定义文字内容，参数为百分比 | children 函数 |
