Progress 进度条

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

线形进度条

最基础的线形进度条。

50%

100%

70%

30%

<template>
  <ZcProgress :percentage="50" />
  <ZcProgress :percentage="100" status="success" />
  <ZcProgress :percentage="70" status="warning" />
  <ZcProgress :percentage="30" status="exception" />
</template>

百分比内显

设置 text-inside 属性将百分比显示在进度条内部。

80%

100%

50%

<template>
  <ZcProgress :percentage="80" text-inside />
  <ZcProgress :percentage="100" status="success" text-inside />
  <ZcProgress :percentage="50" status="warning" text-inside stroke-width="22" />
</template>

环形进度条

通过设置 type 属性为 circle 或 dashboard 使用环形进度条。

75%

100%

60%

<template>
  <ZcProgress type="circle" :percentage="75" :width="120" />
  <ZcProgress type="circle" :percentage="100" status="success" :width="120" />
  <ZcProgress type="dashboard" :percentage="60" :width="120" />
</template>

条纹动画

通过 striped 和 striped-flow 属性启用条纹动画效果。

30%

60%

100%

<template>
  <ZcProgress :percentage="30" striped />
  <ZcProgress :percentage="60" striped striped-flow />
  <ZcProgress :percentage="100" status="success" striped striped-flow />
</template>

Progress API

Props

参数	说明	类型	默认值
type	进度条类型	'line' | 'circle' | 'dashboard'	'line'
percentage	百分比（0-100）	number	0
status	进度条状态	'primary' | 'success' | 'warning' | 'exception' | 'info'	'primary'
strokeWidth	进度条宽度(px)	number	6
textInside	进度条显示文字内置	boolean	false
showText	是否显示进度文字	boolean	true
width	环形进度条画布宽度	number	126
color	自定义颜色（覆盖 status 颜色）	string	''
striped	是否启用条纹	boolean	false
stripedFlow	是否启用条纹动画	boolean	false
duration	动画时长(秒)	number	3

Slots

插槽名	说明
default	自定义内容（仅 circle/dashboard），作用域参数: { percentage }