Progress - Vant 4

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.

Stroke Width

Inactive

Custom Style

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

API

Props

Attribute	Description	Type	Default
percentage	Percentage	*number	string*
stroke-width	Stroke width	*number	string*
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 |

Types

The component exports the following type definitions:

importtype { ProgressProps, ProgressInstance } from'vant';

Theming

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-inactive-color	var(--van-gray-5)	-
--van-progress-background	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	var(--van-primary-color)	-