Preview Updated 2026-05-10

Progress

Linear / circular progress bar with 5 semantic tones, indeterminate state, and percentage display.

Basic usage

value is a percentage in the range 0..100. showLabel renders the current percentage to the right of the linear bar.

背景

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>

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

const v = ref(30);
let timer= 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 />

<CfProgress value={value} showLabel />

Five tones

tone — primary / success / warning / danger / info, mapped to --accent-* / --status-* tokens.

背景

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>

<script setup>
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 />

<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 />

Circle variant

variant="circle" switches to a ring — well suited to cards, KPIs, and gauges. size controls the diameter; strokeWidth explicitly sets the ring thickness (default is inferred from 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>

<script setup>
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 />

<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

When indeterminate is set, value is ignored and a looping animation is rendered — for waiting states with unknown progress.

背景

<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>

<script setup>
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" />

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

API

Prop	Type	Default	Description
`value`	`number` (0..100)	`0`	Current progress
`variant`	`'line' \| 'circle'`	`'line'`	Visual form
`tone`	`'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'`	`'primary'`	Semantic color
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Height (line) / diameter (circle)
`indeterminate`	`boolean`	`false`	Indeterminate state; ignores value, loops animation
`showLabel`	`boolean`	`false`	Show percentage on the right / center
`strokeWidth`	`number`	—	Ring thickness in circle mode (defaults from size)