Progress
Displays an indicator showing the completion progress of a task, typically displayed as a progress bar. Based on BrConfigProvider for global theming, supporting both linear and radial variants.
Component Features
- 📊 Linear & Radial: Supports both linear progress bar and radial circular progress.
- 📏 Multiple Sizes: Supports
sm, md, lg size specs.
- 🏷️ Labels: Supports
label, indicator, and hidden label modes.
- ⏳ Indeterminate State: Supports indeterminate animation for unknown progress.
- 🎨 Custom Colors: Supports custom colors for different states.
- 📐 Custom Thickness: Supports custom stroke width for radial progress.
- 🎨 Theme Customization: Based on
BrConfigProvider for global theming and TailwindCSS local overrides.
Usage
Linear Progress
The default progress bar style, supporting different sizes.
<script setup lang="ts">
import { ref } from 'vue'
import { BrProgress } from '@breezeui/vue'
const progress = ref(45)
</script>
<template>
<div class="space-y-4 w-full">
<BrProgress v-model="progress" size="sm" />
<BrProgress v-model="progress" size="md" />
<BrProgress v-model="progress" size="lg" />
</div>
</template>
Radial Progress
Set variant to radial to use the radial progress indicator.
<script setup lang="ts">
import { ref } from 'vue'
import { BrProgress } from '@breezeui/vue'
const progress = ref(60)
</script>
<template>
<div class="flex items-center gap-4">
<BrProgress v-model="progress" variant="radial" size="sm" />
<BrProgress v-model="progress" variant="radial" size="md" />
<BrProgress v-model="progress" variant="radial" size="lg" />
</div>
</template>
Labels
You can show progress labels using the showLabel prop, and customize the format and position.
<script setup lang="ts">
import { ref } from 'vue'
import { BrProgress } from '@breezeui/vue'
const progress = ref(75)
const formatLabel = (val: number, max: number) => `${val} / ${max}`
</script>
<template>
<div class="space-y-6 w-full">
<!-- Outer Label -->
<BrProgress v-model="progress" show-label="outer" />
<!-- Inner Label -->
<BrProgress v-model="progress" size="2xl" show-label="inner" />
<!-- Custom Format -->
<BrProgress v-model="progress" show-label="outer" :label-format="formatLabel" />
<!-- Radial Label -->
<BrProgress v-model="progress" variant="radial" size="xl" show-label />
</div>
</template>
Indeterminate State
Use the indeterminate prop to show a loading animation when the progress is unknown.
<script setup lang="ts">
import { BrProgress } from '@breezeui/vue'
</script>
<template>
<div class="space-y-6 w-full">
<BrProgress indeterminate />
<BrProgress variant="radial" indeterminate />
</div>
</template>
Theming
BrProgress is fully integrated with BrConfigProvider, allowing global configuration or local class customization.
Global Customization (BrConfigProvider)
You can override default CSS variables via the theme and size props of BrConfigProvider to customize colors, animation speed, etc.
<script setup lang="ts">
import { ref } from 'vue'
import { BrConfigProvider, BrProgress } from '@breezeui/vue'
const progress = ref(50)
const theme = {
primary: '#10B981', // Change progress bar color
transitionDuration: '1000ms', // Change animation speed
}
</script>
<template>
<div class="space-y-4 w-full">
<BrConfigProvider :theme="theme" size="lg">
<BrProgress v-model="progress" />
<BrProgress v-model="progress" variant="radial" />
</BrConfigProvider>
</div>
</template>
Colors Customization
You can use TailwindCSS utility classes or the component's color and trackColor props to override styles locally.
<script setup lang="ts">
import { ref } from 'vue'
import { BrProgress } from '@breezeui/vue'
const progress = ref(30)
</script>
<template>
<div class="space-y-4 w-full">
<!-- Using props -->
<BrProgress v-model="progress" color="#ef4444" track-color="#fee2e2" />
<!-- Using named color -->
<BrProgress v-model="progress" color="orange" />
<!-- Using Tailwind classes (text-color for indicator, bg-color for track) -->
<BrProgress v-model="progress" class="text-blue-500 bg-blue-100" />
</div>
</template>
API
BrProgress / BrProgressLinear / BrProgressRadial
These three components share the same props and events. BrProgress is a wrapper that renders the corresponding sub-component based on the variant prop.
Props
Emits
Slots