开发预览更新于 2026-05-10

Progress 进度

线性 / 圆形进度条，5 种语义色，支持不确定状态与显示百分比。

基础用法

value 是 0..100 的百分比。showLabel 在线性条右侧显示当前百分比文本。

背景

30%

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { CfProgress } from '@chufix-design/vue';

const v = ref(30);
let timer: ReturnType<typeof setInterval> | null = null;
onMounted(() => {
  timer = setInterval(() => {
    v.value = (v.value + 7) % 100;
  }, 800);
});
onBeforeUnmount(() => timer && clearInterval(timer));
</script>

<template>
  <div style="width: 100%; max-width: 28rem;">
    <CfProgress :value="v" show-label />
  </div>
</template>

<CfProgress value={value} showLabel />

5 种 tone

tone —— primary / success / warning / danger / info，对应 token 里 --accent-* / --status-*。

背景

60%

<script setup lang="ts">
import { CfProgress } from '@chufix-design/vue';
</script>

<template>
  <div class="demo-stack" style="width: 100%; max-width: 28rem;">
    <CfProgress :value="60" tone="primary" show-label />
    <CfProgress :value="60" tone="success" show-label />
    <CfProgress :value="60" tone="warning" show-label />
    <CfProgress :value="60" tone="danger" show-label />
    <CfProgress :value="60" tone="info" show-label />
  </div>
</template>

<CfProgress value={60} tone="primary" showLabel />
<CfProgress value={60} tone="success" showLabel />
<CfProgress value={60} tone="warning" showLabel />
<CfProgress value={60} tone="danger" showLabel />
<CfProgress value={60} tone="info" showLabel />

圆形 variant

variant="circle" 切换成环形 — 适合卡片、KPI 或仪表盘场景。size 控制直径，strokeWidth 可显式控制环线粗细（默认按 size 推断）。

背景

40%

60%

100%

<script setup lang="ts">
import { CfProgress } from '@chufix-design/vue';
</script>

<template>
  <div style="display: flex; gap: 16px; align-items: center; flex-wrap: wrap;">
    <CfProgress variant="circle" size="sm" :value="40" show-label />
    <CfProgress variant="circle" :value="60" show-label />
    <CfProgress variant="circle" size="lg" :value="100" tone="success" show-label />
    <CfProgress variant="circle" size="lg" indeterminate />
  </div>
</template>

<CfProgress variant="circle" size="sm" value={40} showLabel />
<CfProgress variant="circle" value={60} showLabel />
<CfProgress variant="circle" size="lg" value={100} tone="success" showLabel />
<CfProgress variant="circle" size="lg" indeterminate />

不确定状态

indeterminate 时忽略 value，渲染循环动画 — 适合不知道进度的等待场景。

背景

<script setup lang="ts">
import { CfProgress } from '@chufix-design/vue';
</script>

<template>
  <div class="demo-stack" style="width: 100%; max-width: 28rem;">
    <CfProgress indeterminate />
    <CfProgress indeterminate tone="success" />
    <CfProgress indeterminate tone="danger" size="sm" />
  </div>
</template>

<CfProgress indeterminate />
<CfProgress indeterminate tone="success" />
<CfProgress indeterminate tone="danger" size="sm" />

API

Prop	类型	默认值	说明
`value`	`number`（0..100）	`0`	当前进度
`variant`	`'line' \| 'circle'`	`'line'`	视觉形态
`tone`	`'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'`	`'primary'`	语义色
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	高度（line）/ 直径（circle）
`indeterminate`	`boolean`	`false`	不确定状态，忽略 value，循环动画
`showLabel`	`boolean`	`false`	在右侧 / 中心显示百分比
`strokeWidth`	`number`	—	circle 模式下环线宽度（默认按 size）