vant/src/progress

Progress

Intro

Used to show the current progress of the operation.

Install

Register component globally via app.use, refer to Component Registration for more registration ways.

import { createApp } from 'vue';
import { Progress } from 'vant';

const app = createApp();
app.use(Progress);

Usage

Basic Usage

Use percentage prop to set current progress.

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

Stroke Width

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

Inactive

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

Custom Style

Use pivot-text to custom text，use color to custom bar color.

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

API

Props

Attribute	Description	Type	Default
percentage	Percentage	number | string	0
stroke-width	Stroke width	number | string	4px
color	Color	string	#1989fa
track-color	Track color	string	#e5e5e5
pivot-text	Pivot text	string	percentage
pivot-color	Pivot text background color	string	inherit progress color
text-color	Pivot text color	string	white
inactive	Whether to be gray	boolean	false
show-pivot	Whether to show text	boolean	true

Methods

Use ref to get Progress instance and call instance methods.

Name	Description	Attribute	Return value
resize	Resize Progress when container element resized or visibility changed	-	-

CSS Variables

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

Name	Default Value	Description
--van-progress-height	4px	-
--van-progress-color	var(--van-primary-color)	-
--van-progress-background-color	var(--van-gray-3)	-
--van-progress-pivot-padding	0 5px	-
--van-progress-pivot-text-color	var(--van-white)	-
--van-progress-pivot-font-size	var(--van-font-size-xs)	-
--van-progress-pivot-line-height	1.6	-
--van-progress-pivot-background-color	var(--van-primary-color)	-