Progress progress bar

introduce

Used to display the current progress of the operation.

Code Demo

Basic usage

The progress bar is blue by default, use the percentage property to set the current progress.

<z-progress :percentage="50" />

Line thickness

The thickness of the progress bar can be set with stroke-width.

<z-progress :percentage="50" stroke-width="8" />

Grayed out

Setting the inactive property will make the progress bar gray.

<z-progress inactive :percentage="50" />

Style customization

You can use the pivot-text attribute to customize the text and the color attribute to customize the progress bar color.

<z-progress pivot-text="orange" color="#f2826a" :percentage="25" />
<z-progress pivot-text="Red" color="#ee0a24" :percentage="50" />
<z-progress
   :percentage="75"
   pivot-text="Purple"
   pivot-color="#7232dd"
   color="linear-gradient(to right, #be99ff, #7232dd)"
/>

API

Props

Parameters	Description	Type	Default value
percentage	progress percentage	number \| string	`0`
stroke-width	Progress bar thickness, default unit is `px`	number \| string	`8rpx`
color	progress bar color	string	`#1989fa`
track-color	track color	string	`#e5e5e5`
pivot-text	progress text content	string	percentage
pivot-color	Progress text background color	string	Same as progress bar color
text-color	Progress text color	string	`white`
inactive	whether to gray out	boolean	`false`
show-pivot	Whether to display progress text	boolean	`true`

Theme customization

Style variables

The component provides the following CSS variables, which can be used to customize styles. For usage, please refer to ConfigProvider component.

Name	Default	Description
--z-progress-height	8rpx	-
--z-progress-color	var(--z-primary-color)	-
--z-progress-inactive-color	var(--z-gray-5)	-
--z-progress-background	var(--z-gray-3)	-
--z-progress-pivot-padding	0 10rpx	-
--z-progress-pivot-text-color	var(--z-white)	-
--z-progress-pivot-font-size	var(--z-font-size-xs)	-
--z-progress-pivot-line-height	1.6	-
--z-progress-pivot-background	var(--z-primary-color)	-