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