Progress Component

Progress component is used to display the current progress of an operation, letting users understand the completion status of the current task.

Basic Usage

Basic progress bar for displaying percentage progress.

Show Code

Progress Status

Progress bar provides four states: default, success, warning, and exception.

Default

Success

Warning

Exception

Show Code

Text Inside

Set the textInside attribute to display the percentage inside the progress bar.

Show Code

Custom Color

Through the color attribute, you can customize the progress bar color, supporting three methods: single color, multi-color intervals, and dynamic functions.

Custom Single Color

Custom Single Color

Segmented Colors

Function Calculated Color

Show Code

Circle Progress

Set type to circle to use circular progress bar.

Show Code

Dashboard Progress

Set type to dashboard to use dashboard-style progress bar.

25%

75%

Completed

0%

Show Code

Striped Effect

Set the striped attribute to make the progress bar show striped effect, set stripedFlow to make the stripes animate.

Static Stripes

Animated Stripes

Success Animated Stripes

Warning Animated Stripes

Exception Animated Stripes

Show Code

Custom Size

Set the strokeWidth attribute to change the thickness of the progress bar. For circular and dashboard progress bars, you can also set the overall size through the width attribute.

Linear Progress Bar Thickness

Default height 6px

Height 12px

Height 18px

Height 24px

Circle Progress Bar Size

80px

100px

120px

Circle Progress Bar Thickness

strokeWidth: 3px

strokeWidth: 6px (default)

strokeWidth: 10px

Show Code

Indeterminate Progress

Set the indeterminate attribute to create an indeterminate progress effect, suitable for scenarios where progress cannot be accurately determined.

Default Indeterminate Progress

Fast Animation (duration=2)

Slow Animation (duration=5)

Custom Color

Thick Stroke

Show Code

Custom Text Format

Through the format attribute, you can customize the display text format, or use the default slot to completely customize the content.

Using format Property

Using Default Slot

Show Code

Progress API

Attributes

Attribute	Description	Type	Accepted Values	Default
percentage	Percentage value	number	0-100	0
type	Progress bar type	string	line / circle / dashboard	line
strokeWidth	Progress bar width	number	—	6
textInside	Whether to display text inside progress bar	boolean	—	false
status	Progress bar status	string	success / warning / exception	—
indeterminate	Whether indeterminate progress bar	boolean	—	false
duration	Animation duration	number	—	3
color	Progress bar color	string / function / array	—	—
width	Circle/dashboard progress bar width	number	—	126
showText	Whether to show progress text	boolean	—	true
strokeLinecap	Progress bar endpoint shape	string	butt / round / square	round
format	Custom text format	function(percentage)	—	—
striped	Whether to have stripes	boolean	—	false
stripedFlow	Whether stripes flow	boolean	—	false

Slots

Slot Name	Description	Scope Parameters
default	Custom progress bar text content

Style Variables

The progress component uses the following style variables, which can be customized through SCSS variables:

Variable Name	Description
$theme-color-primary	Theme color - Primary
$theme-color-success	Theme color - Success
$theme-color-warning	Theme color - Warning
$theme-color-danger	Theme color - Danger
$color-white	White color
$text-color-default	Default text color
$bg-color-default	Default background color