vant/src/progress

Progress

Install

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

Vue.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	-	-

Less Variables

How to use: Custom Theme.

Name	Default Value	Description
@progress-height	4px	-
@progress-color	@blue	-
@progress-background-color	@gray-3	-
@progress-pivot-padding	0 5px	-
@progress-pivot-text-color	@white	-
@progress-pivot-font-size	@font-size-xs	-
@progress-pivot-line-height	1.6	-
@progress-pivot-background-color	@blue	-