FxProgress 进度条

用于展示任务进度，告知用户当前操作的状态。支持线性 / 环形 / 仪表盘三种形态、状态色、不确定动画、条纹流动、自定义颜色与文字。不依赖任何 UI 框架，样式走 @fx/styles token。

线性进度条

用 percentage 设置进度（必填，0-100）。可用 format 自定义文字格式。

<template>
  <div class="demo-progress">
    <FxProgress :percentage="50" />
    <FxProgress :percentage="100" :format="format" />
    <FxProgress :percentage="100" status="success" />
    <FxProgress :percentage="100" status="warning" />
    <FxProgress :percentage="50" status="exception" />
  </div>
</template>

<script setup lang="ts">
const format = (percentage: number) =>
  percentage === 100 ? "满" : `${percentage}%`
</script>

<style scoped>
.demo-progress .fx-progress--line {
  margin-bottom: 15px;
  max-width: 600px;
}
</style>

内嵌文字

stroke-width 决定进度条宽度，用 text-inside 将描述文字放入进度条内（不占额外空间）。

<template>
  <div class="demo-progress">
    <FxProgress :text-inside="true" :stroke-width="26" :percentage="70" />
    <FxProgress
      :text-inside="true"
      :stroke-width="24"
      :percentage="100"
      status="success"
    />
    <FxProgress
      :text-inside="true"
      :stroke-width="22"
      :percentage="80"
      status="warning"
    />
    <FxProgress
      :text-inside="true"
      :stroke-width="20"
      :percentage="50"
      status="exception"
    />
  </div>
</template>

<style scoped>
.demo-progress .fx-progress--line {
  margin-bottom: 15px;
  max-width: 600px;
}
</style>

自定义颜色

用 color 设置进度条颜色，支持字符串、函数、数组三种形式。

<template>
  <div class="demo-progress">
    <FxProgress :percentage="percentage" :color="customColor" />
    <FxProgress :percentage="percentage" :color="customColorMethod" />
    <FxProgress :percentage="percentage" :color="customColors" />
    <FxProgress :percentage="percentage" :color="customColors" />
    <div>
      <FxButtonGroup>
        <FxBtn @click="decrease">－</FxBtn>
        <FxBtn @click="increase">＋</FxBtn>
      </FxButtonGroup>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import type { ProgressColor } from "@fx/components"

const percentage = ref(20)
const customColor = ref("#409eff")
const customColors: ProgressColor[] = [
  { color: "#f56c6c", percentage: 20 },
  { color: "#e6a23c", percentage: 40 },
  { color: "#5cb87a", percentage: 60 },
  { color: "#1989fa", percentage: 80 },
  { color: "#6f7ad3", percentage: 100 },
]
const customColorMethod = (p: number) => {
  if (p < 30) return "#909399"
  if (p < 70) return "#e6a23c"
  return "#67c23a"
}
const increase = () => {
  percentage.value = Math.min(100, percentage.value + 10)
}
const decrease = () => {
  percentage.value = Math.max(0, percentage.value - 10)
}
</script>

<style scoped>
.demo-progress .fx-progress--line {
  margin-bottom: 15px;
  max-width: 600px;
}
</style>

环形进度条

type="circle" 切换为环形进度条，width 改变画布尺寸。

<template>
  <div class="demo-progress">
    <FxProgress type="circle" :percentage="0" />
    <FxProgress type="circle" :percentage="25" />
    <FxProgress type="circle" :percentage="100" status="success" />
    <FxProgress type="circle" :percentage="70" status="warning" />
    <FxProgress type="circle" :percentage="50" status="exception" />
  </div>
</template>

<style scoped>
.demo-progress .fx-progress--circle {
  margin-right: 15px;
}
</style>

仪表盘进度条

type="dashboard" 切换为仪表盘进度条。

<template>
  <div class="demo-progress">
    <FxProgress type="dashboard" :percentage="percentage" :color="colors" />
    <FxProgress type="dashboard" :percentage="percentage2" :color="colors" />
    <div>
      <FxButtonGroup>
        <FxBtn @click="decrease">－</FxBtn>
        <FxBtn @click="increase">＋</FxBtn>
      </FxButtonGroup>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue"
import type { ProgressColor } from "@fx/components"

const percentage = ref(10)
const percentage2 = ref(0)
const colors: ProgressColor[] = [
  { color: "#f56c6c", percentage: 20 },
  { color: "#e6a23c", percentage: 40 },
  { color: "#5cb87a", percentage: 60 },
  { color: "#1989fa", percentage: 80 },
  { color: "#6f7ad3", percentage: 100 },
]
const increase = () => {
  percentage.value = Math.min(100, percentage.value + 10)
}
const decrease = () => {
  percentage.value = Math.max(0, percentage.value - 10)
}
onMounted(() => {
  setInterval(() => {
    percentage2.value = (percentage2.value % 100) + 10
  }, 500)
})
</script>

<style scoped>
.demo-progress .fx-progress--line {
  margin-bottom: 15px;
  max-width: 600px;
}
.demo-progress .fx-progress--dashboard {
  margin-right: 15px;
}
</style>

自定义内容

用默认插槽自定义显示内容。

<template>
  <div class="demo-progress">
    <FxProgress :percentage="50">
      <FxBtn text>内容</FxBtn>
    </FxProgress>
    <FxProgress
      :text-inside="true"
      :stroke-width="20"
      :percentage="50"
      status="exception"
    >
      <span>内容</span>
    </FxProgress>
    <FxProgress type="circle" :percentage="100" status="success">
      <FxIcon name="ep:check" />
    </FxProgress>
    <FxProgress type="dashboard" :percentage="80">
      <template #default="{ percentage }">
        <span class="percentage-value">{{ percentage }}%</span>
        <span class="percentage-label">进行中</span>
      </template>
    </FxProgress>
  </div>
</template>

<style scoped>
.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: 28px;
}
.percentage-label {
  display: block;
  margin-top: 10px;
  font-size: 12px;
}
.demo-progress .fx-progress--line {
  margin-bottom: 15px;
  max-width: 600px;
}
.demo-progress .fx-progress--circle {
  margin-right: 15px;
}
</style>

不确定进度

用 indeterminate 设置不确定进度，duration 控制动画时长。

<template>
  <div class="demo-progress">
    <FxProgress :percentage="50" :indeterminate="true" />
    <FxProgress :percentage="100" :format="format" :indeterminate="true" />
    <FxProgress
      :percentage="100"
      status="success"
      :indeterminate="true"
      :duration="5"
    />
    <FxProgress
      :percentage="100"
      status="warning"
      :indeterminate="true"
      :duration="1"
    />
    <FxProgress :percentage="50" status="exception" :indeterminate="true" />
  </div>
</template>

<script setup lang="ts">
const format = (percentage: number) =>
  percentage === 100 ? "满" : `${percentage}%`
</script>

<style scoped>
.demo-progress .fx-progress--line {
  margin-bottom: 15px;
  max-width: 600px;
}
</style>

条纹

用 striped 设置条纹进度，striped-flow 让条纹流动，duration 控制动画时长。

<template>
  <div class="demo-progress">
    <FxProgress :percentage="50" :stroke-width="15" striped />
    <FxProgress
      :percentage="30"
      :stroke-width="15"
      status="warning"
      striped
      striped-flow
    />
    <FxProgress
      :percentage="100"
      :stroke-width="15"
      status="success"
      striped
      striped-flow
      :duration="10"
    />
    <FxProgress
      :percentage="percentage"
      :stroke-width="15"
      status="exception"
      striped
      striped-flow
      :duration="duration"
    />
    <FxButtonGroup>
      <FxBtn @click="decrease">－</FxBtn>
      <FxBtn @click="increase">＋</FxBtn>
    </FxButtonGroup>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from "vue"

const percentage = ref<number>(70)
const duration = computed(() => Math.floor(percentage.value / 10))
const increase = () => {
  percentage.value = Math.min(100, percentage.value + 10)
}
const decrease = () => {
  percentage.value = Math.max(0, percentage.value - 10)
}
</script>

<style scoped>
.demo-progress .fx-progress--line {
  margin-bottom: 15px;
  max-width: 600px;
}
</style>

API

Attributes

参数	说明	类型	默认值
percentage	进度值（0-100，必填）	number	0
type	类型	'line' | 'circle' | 'dashboard'	'line'
stroke-width	线宽（line 为 px，circle/dashboard 为相对）	number	6
text-inside	文字内嵌（仅 line）	boolean	false
status	当前状态	'' | 'success' | 'exception' | 'warning'	''
indeterminate	不确定进度（往复动画）	boolean	false
duration	动画时长（秒，indeterminate / striped-flow）	number	3
color	颜色（覆盖 status）	string | ProgressColor[] | ((p: number) => string)	—
width	画布宽度（circle / dashboard，px）	number	126
show-text	是否显示文字	boolean	true
stroke-linecap	线帽形状	'butt' | 'round' | 'square'	'round'
format	自定义文字	(percentage: number) => string	p => \${p}%``
striped	条纹	boolean	false
striped-flow	条纹流动	boolean	false

Slots

名称	说明	作用域参数
default	自定义显示内容（覆盖默认文字 / 状态图标）	{ percentage: number }

实现说明

• 三种形态：line（线性）/ circle（环形整圈）/ dashboard（仪表盘 3/4 圈，缺口在下方）。circle/dashboard 用 SVG path + stroke-dasharray 控制进度。
• 颜色优先级：color prop > status 映射 > 默认主色。color 支持字符串（固定色）/ 断点数组（按百分比分段）/ 函数（动态返回）；状态色走 @fx/styles 语义 token（--color-success / --color-warning / --color-danger / --color-primary），不硬编码色值。
• 状态图标：line 用 ep:circle-check / ep:circle-close；circle/dashboard 用 ep:check / ep:close；warning 用 ep:warning-filled。
• 动画：indeterminate（往复）/ striped-flow（条纹流动），duration 控制周期；过渡时长用 --duration-normal。