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%

src/App.vue

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

import { useEffect, useState } from 'react';
import { CfProgress } from '@chufix-design/react';

export default function Demo() {
  const [v, setV] = useState(30);
  let timer: ReturnType<typeof setInterval> | null = null;
  useEffect(() => {
    timer = setInterval(() => {
      setV((v + 7) % 100);
    }, 800);
  });
  onBeforeUnmount(() => timer && clearInterval(timer));
  return (
    <>
      <div style={{ width: "100%", maxWidth: "28rem" }}>
          <CfProgress value={v} showLabel />
        </div>
    </>
  );
}

import { useEffect, useState } from 'react';
import { CfProgress } from '@chufix-design/react';

export default function Demo() {
  const [v, setV] = useState(30);
  let timer= null;
  useEffect(() => {
    timer = setInterval(() => {
      setV((v + 7) % 100);
    }, 800);
  });
  onBeforeUnmount(() => timer && clearInterval(timer));
  return (
    <>
      <div style={{ width: "100%", maxWidth: "28rem" }}>
          <CfProgress value={v} showLabel />
        </div>
    </>
  );
}

Five tones

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

背景视口

60%

src/App.vue

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

import { CfProgress } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <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 />
    </>
  );
}

import { CfProgress } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <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%

src/App.vue

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

import { CfProgress } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <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 />
    </>
  );
}

import { CfProgress } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <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.

背景视口

src/App.vue

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

import { CfProgress } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfProgress indeterminate />
      <CfProgress indeterminate tone="success" />
      <CfProgress indeterminate tone="danger" size="sm" />
    </>
  );
}

import { CfProgress } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <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)