Progress 进度条
基于 reka-ui 的 Progress 原语构建的新粗野主义风格进度条。
预览
Preview
不确定状态
显示百分比标签
65%
警戒斜纹（pattern）
安装
pnpm dlx brutx-vue@latest add progress用法
vue
<script setup>
import { ref } from 'vue'
import { Progress } from 'brutx-ui-vue'
const progress = ref(45)
</script>
<template>
<Progress v-model="progress" />
</template>带最大值
vue
<script setup>
import { ref } from 'vue'
import { Progress } from 'brutx-ui-vue'
const progress = ref(75)
</script>
<template>
<Progress v-model="progress" :max="100" />
</template>不确定状态
当无法确定具体进度时，设置 indeterminate 为 true，进度条会忽略 modelValue，指示器以 CSS 动画在轨道内循环滑动。
vue
<script setup>
import { Progress } from 'brutx-ui-vue'
</script>
<template>
<Progress indeterminate />
</template>显示百分比标签
设置 showLabel 为 true 时，会在进度条中央显示当前百分比文字（基于 modelValue 与 max 计算，四舍五入取整）。不确定状态下不显示标签。
vue
<script setup>
import { ref } from 'vue'
import { Progress } from 'brutx-ui-vue'
const progress = ref(65)
</script>
<template>
<Progress v-model="progress" show-label />
</template>变体
variant 控制进度指示器的填充颜色。
| 变体 | 说明 |
|---|---|
default | Primary 颜色（bg-brutal-primary） |
secondary | Secondary 颜色（bg-brutal-secondary） |
accent | Accent 颜色（bg-brutal-accent） |
success | Success 颜色（bg-brutal-success） |
danger | Destructive 颜色（bg-brutal-destructive） |
vue
<script setup>
import { ref } from 'vue'
import { Progress } from 'brutx-ui-vue'
const value = ref(60)
</script>
<template>
<div class="flex flex-col gap-4">
<Progress v-model="value" variant="default" />
<Progress v-model="value" variant="secondary" />
<Progress v-model="value" variant="accent" />
<Progress v-model="value" variant="success" />
<Progress v-model="value" variant="danger" />
</div>
</template>警戒斜纹纹理
pattern 为指示器叠加机械质感纹理；hazard 自带黄黑斜纹流动动画（reduced-motion 下静止）。indeterminate 滑轨动画与纹理动画互斥，滑轨优先：
| 纹理 | 说明 |
|---|---|
none | 默认纯色填充 |
hazard | 黄黑警戒斜纹 + 流动动画 |
vue
<template>
<Progress v-model="value" pattern="hazard" />
</template>尺寸
size 控制进度条的高度。
| 尺寸 | 说明 |
|---|---|
sm | 小尺寸（h-3） |
default | 默认尺寸（h-6） |
lg | 大尺寸（h-8） |
vue
<script setup>
import { ref } from 'vue'
import { Progress } from 'brutx-ui-vue'
const value = ref(50)
</script>
<template>
<div class="flex flex-col gap-4">
<Progress v-model="value" size="sm" />
<Progress v-model="value" size="default" />
<Progress v-model="value" size="lg" />
</div>
</template>API 参考
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
class | string | undefined | undefined | 追加到进度条根轨道的 CSS 类。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/progress/Progress.vue | |||
modelValue | number | undefined | 0 | 当前进度数值；超出范围或非有限值会归一化到 0...max 内。 |
详情声明类型number | undefined 默认值详情
来源packages/ui/src/components/progress/Progress.vue | |||
max | number | undefined | 100 | 进度上限；必须是正的有限数，否则组件回退到 100。 |
详情声明类型number | undefined 默认值详情
来源packages/ui/src/components/progress/Progress.vue | |||
size | "default" | "lg" | "sm" | undefined | "default" | 设置进度轨道的高度预设。 |
详情声明类型NonNullable<"default" | "lg" | "sm" | null | undefined> | undefined 字面量
默认值详情
来源packages/ui/src/components/progress/Progress.vue | |||
variant | "accent" | "danger" | "default" | "secondary" | "success" | undefined | "default" | 设置进度指示填充的颜色变体。 |
详情声明类型NonNullable<"default" | "secondary" | "success" | "danger" | "accent" | null | undefined> | undefined 字面量
默认值详情
来源packages/ui/src/components/progress/Progress.vue | |||
pattern | "hazard" | "none" | "segmented" | undefined | "none" | 在指示填充上叠加无纹理、LED 分段或警戒斜纹效果；不确定状态会优先使用滑轨动画而关闭纹理。 |
详情声明类型NonNullable<"none" | "hazard" | "segmented" | null | undefined> | undefined 字面量
默认值详情
来源packages/ui/src/components/progress/Progress.vue | |||
indeterminate | boolean | undefined | false | 显示循环移动的不确定进度，不使用 modelValue。 |
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/progress/Progress.vue | |||
showLabel | boolean | undefined | false | 在确定进度时显示居中的百分比标签；不确定状态不显示。 |
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/progress/Progress.vue | |||
可访问性
组件基于 reka-ui 的 ProgressRoot 原语，自动具备以下无障碍属性：
role="progressbar"aria-valuemin="0"aria-valuemax对应max值aria-valuenow对应当前modelValue（不确定状态下不设置）