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.

Usage

Linear Progress

The default progress bar style, supporting different sizes.

Example

Radial Progress

Set variant to radial to use the radial progress indicator.

Example

Labels

You can show progress labels using the showLabel prop, and customize the format and position.

75%

75%

75 / 100

75%

Example

Indeterminate State

Use the indeterminate prop to show a loading animation when the progress is unknown.

Example

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.

Example

Colors Customization

You can use TailwindCSS utility classes or the component's color and trackColor props to override styles locally.

Example

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

Prop Name	Type	Default	Description
modelValue	number | null	0	The current value of the progress bar (0 - max)
max	number	100	The maximum value of the progress bar
variant	'linear' | 'radial'	'linear'	The visual variant of the progress bar
size	'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'default'	'default'	The size of the progress bar
color	string	-	Custom color for the progress indicator
trackColor	string	-	Custom color for the progress track
thickness	number | string	-	Custom thickness (height for linear, stroke width for radial)
showLabel	boolean | string	false	Whether to show the progress label (supports 'inner' / 'outer')
labelFormat	(value: number, max: number) => string	-	Custom label formatter function
disabled	boolean	false	Whether the progress bar is disabled
indeterminate	boolean	false	Whether to show loading animation (unknown progress)
animationDuration	string | number	-	Animation duration (overrides theme config)

Emits

Event Name	Description	Parameters
update:modelValue	Updates the bound value	(value: number | null)

Slots

Slot Name	Description
label	Custom label content, parameters: { value, max, percentage }
title	Custom title content on the left of the outer label (Linear variant only)