Progress 进度条

展示操作或任务的当前进度，支持条形、内嵌文字、环形和仪表盘四种样式。

基础用法

30%

60%

70%

条形进度条，支持多种状态颜色

vue

<script setup lang="ts">
import { AProgress } from '@lite-code/aui-vue'
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; width: 100%;">
    <AProgress :percent="30" />
    <AProgress :percent="60" />
    <AProgress :percent="100" />
    <AProgress :percent="70" status="error" />
    <AProgress :percent="70" status="warning" />
    <AProgress :percent="70" status="active" />
  </div>
</template>

环形 / 仪表盘

65%

65%

type='circle' 环形，type='dashboard' 仪表盘样式

vue

<script setup lang="ts">
import { AProgress } from '@lite-code/aui-vue'
</script>

<template>
  <div style="display: flex; gap: 24px; flex-wrap: wrap; align-items: center;">
    <AProgress :percent="65" type="circle" />
    <AProgress :percent="100" type="circle" />
    <AProgress :percent="65" type="dashboard" />
    <AProgress :percent="30" type="circle" status="error" />
  </div>
</template>

内嵌文字

0%

30%

70%

100%

type='line-inner' 将百分比显示在进度条内部

vue

<script setup lang="ts">
import { AProgress } from '@lite-code/aui-vue'
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; width: 100%;">
    <AProgress :percent="0"   type="line-inner" />
    <AProgress :percent="30"  type="line-inner" />
    <AProgress :percent="70"  type="line-inner" />
    <AProgress :percent="100" type="line-inner" />
  </div>
</template>

API

Props

属性	类型	默认值	说明
percent	number	0	进度百分比（0–100）
type	ProgressType	'line'	样式：line | line-inner | circle | dashboard
status	ProgressStatus	'normal'	状态颜色
strokeWidth	number	—	进度条粗细（px），line 默认随 size；circle 默认 6
showInfo	boolean	true	是否显示百分比/状态图标
format	(p: number) => string	—	自定义显示文字
size	ProgressSize	'md'	line 尺寸：sm(4px) | md(8px) | lg(12px)
className	string	—	自定义 class
style	object	—	自定义样式

类型

type ProgressType = "line" | "line-inner" | "circle" | "dashboard";
type ProgressStatus = "normal" | "success" | "error" | "warning" | "active";
type ProgressSize = "sm" | "md" | "lg";