Progress
Progress is used to show the progress of current operation, and inform the user the current status.
Linear progress bar
Use percentage attribute to set the percentage. It's required and must be between 0-100. You can custom text format by setting 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> );}
Internal percentage
In this case the percentage takes no additional space.
stroke-width attribute decides the width of progress bar, and use text-inside attribute to put description inside the progress bar.
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> );}
Custom color
You can use color attr to set the progress bar color. it accepts color string, function, or array.
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> );}
Circular progress bar
You can specify type attribute to circle to use circular progress bar, and use width attribute to change the size of circle.
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> );}
Dashboard progress bar
You also can specify type attribute to dashboard to use dashboard progress bar.
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> );}
Customized content
Use default slot to add customized content.
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 progress
Use indeterminate attribute to set indeterminate progress, with duration to control the animation 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 progress
Use striped attribute to set striped progress. You can use striped-flow to get the stripes to flow, with duration to control the animation 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> );}
API
Attributes
| Name | Description | Type | Default |
|---|
| percentage required | percentage | number | 0 |
| type | the type of progress bar | enum | line |
| stroke-width | the width of progress bar | number | 6 |
| text-inside | whether to place the percentage inside progress bar, only works when type is 'line' | boolean | false |
| status | the current status of progress bar | enum | — |
| indeterminate | set indeterminate progress | boolean | false |
| duration | control the animation duration of indeterminate progress or striped flow progress | number | 3 |
| color | background color of progress bar. Overrides status prop | string / function / Array | '' |
| width | the canvas width of circle progress bar | number | 126 |
| show-text | whether to show percentage | boolean | true |
| stroke-linecap | circle/dashboard type shape at the end path | enum | round |
| format | custom text format | Function | — |
| striped 2.3.4 | stripe over the progress bar's color | boolean | false |
| striped-flow 2.3.4 | get the stripes to flow | boolean | false |
Slots
| Name | Description | Type |
|---|
| default | Customized content | object |
