Progress

A neo-brutalist style progress bar built on reka-ui's Progress primitive.

Demo

Preview

不确定状态

显示百分比标签

65%

警戒斜纹（pattern）

Installation

pnpm dlx brutx-vue@latest add progress

Usage

<script setup>
import { ref } from 'vue'
import { Progress } from 'brutx-ui-vue'

const progress = ref(45)
</script>

<template>
    <Progress v-model="progress" />
</template>

With Max Value

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

When the exact progress cannot be determined, set indeterminate to true. The progress bar will ignore modelValue and the indicator will cycle with a CSS animation along the track.

<script setup>
import { Progress } from 'brutx-ui-vue'
</script>

<template>
    <Progress indeterminate />
</template>

Show Percentage Label

When showLabel is set to true, a percentage text is displayed in the center of the progress bar (calculated from modelValue and max, rounded to the nearest integer). The label is not shown in indeterminate state.

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

Variants

variant controls the fill color of the progress indicator.

Variant	Description
default	Primary color (bg-brutal-primary)
secondary	Secondary color (bg-brutal-secondary)
accent	Accent color (bg-brutal-accent)
success	Success color (bg-brutal-success)
danger	Destructive color (bg-brutal-destructive)

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

Hazard Stripe Texture

pattern overlays a mechanical texture on the indicator; hazard ships with a flowing yellow-black stripe animation (static under reduced-motion). The indeterminate slide animation is mutually exclusive with the texture animation — the slide wins:

Pattern	Description
none	Default solid fill
hazard	Yellow-black warning stripes with flow animation

<template>
    <Progress v-model="value" pattern="hazard" />
</template>

Sizes

size controls the height of the progress bar.

Size	Description
sm	Small size (h-3)
default	Default size (h-6)
lg	Large size (h-8)

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

Progress — Props

Name	Type	Default	Description
class	string | undefined	undefined	CSS classes added to the progress root track.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/progress/Progress.vue Resolved value undefined Source Progress.vue:12 packages/ui/src/components/progress/Progress.vue
modelValue	number | undefined	0	The current progress value; values outside the range or non-finite values are normalized to 0...max.
Details Declared type number | undefined Default value details Declaration 0 Source: packages/ui/src/components/progress/Progress.vue Resolved value 0 Source Progress.vue:13 packages/ui/src/components/progress/Progress.vue
max	number | undefined	100	The upper progress bound; non-positive or non-finite values fall back to 100.
Details Declared type number | undefined Default value details Declaration 100 Source: packages/ui/src/components/progress/Progress.vue Resolved value 100 Source Progress.vue:14 packages/ui/src/components/progress/Progress.vue
size	"default" | "lg" | "sm" | undefined	"default"	Sets the height preset of the progress track.
Details Declared type NonNullable<"default" | "lg" | "sm" | null | undefined> | undefined Literal values "default" "lg" "sm" Default value details Declaration 'default' Source: packages/ui/src/components/progress/Progress.vue Resolved value "default" Source Progress.vue:15 packages/ui/src/components/progress/Progress.vue
variant	"accent" | "danger" | "default" | "secondary" | "success" | undefined	"default"	Sets the color variant of the progress indicator.
Details Declared type NonNullable<"default" | "secondary" | "success" | "danger" | "accent" | null | undefined> | undefined Literal values "accent" "danger" "default" "secondary" "success" Default value details Declaration 'default' Source: packages/ui/src/components/progress/Progress.vue Resolved value "default" Source Progress.vue:16 packages/ui/src/components/progress/Progress.vue
pattern	"hazard" | "none" | "segmented" | undefined	"none"	Adds no texture, segmented LED styling, or animated hazard stripes to the fill. Indeterminate mode uses the track animation and suppresses the pattern.
Details Declared type NonNullable<"none" | "hazard" | "segmented" | null | undefined> | undefined Literal values "hazard" "none" "segmented" Default value details Declaration 'none' Source: packages/ui/src/components/progress/Progress.vue Resolved value "none" Source Progress.vue:18 packages/ui/src/components/progress/Progress.vue
indeterminate	boolean | undefined	false	Shows a looping indeterminate indicator that does not use modelValue.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/progress/Progress.vue Resolved value false Source Progress.vue:19 packages/ui/src/components/progress/Progress.vue
showLabel	boolean | undefined	false	Shows a centered percentage label for determinate progress; it is hidden in indeterminate mode.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/progress/Progress.vue Resolved value false Source Progress.vue:20 packages/ui/src/components/progress/Progress.vue

Accessibility

The component is built on reka-ui's ProgressRoot primitive and automatically includes the following accessibility attributes:

• role="progressbar"
• aria-valuemin="0"
• aria-valuemax corresponds to the max value
• aria-valuenow corresponds to the current modelValue (not set in indeterminate state)