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

ParametersDescriptionTypeDefault value
percentageprogress percentagenumber | string0
stroke-widthProgress bar thickness, default unit is pxnumber | string8rpx
colorprogress bar colorstring#1989fa
track-colortrack colorstring#e5e5e5
pivot-textprogress text contentstringpercentage
pivot-colorProgress text background colorstringSame as progress bar color
text-colorProgress text colorstringwhite
inactivewhether to gray outbooleanfalse
show-pivotWhether to display progress textbooleantrue

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.

NameDefaultDescription
--z-progress-height8rpx-
--z-progress-colorvar(--z-primary-color)-
--z-progress-inactive-colorvar(--z-gray-5)-
--z-progress-backgroundvar(--z-gray-3)-
--z-progress-pivot-padding0 10rpx-
--z-progress-pivot-text-colorvar(--z-white)-
--z-progress-pivot-font-sizevar(--z-font-size-xs)-
--z-progress-pivot-line-height1.6-
--z-progress-pivot-backgroundvar(--z-primary-color)-