Vant Progress Progress Bar

Introduced

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

Vue.use(Progress);

Code demo

Basic usage

The progress bar is blue by default, using the percentage property to set the current progress

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

The line is thick

The weight of the progress bar can be set bystroke-width

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

Graying

When the active property is set, the progress bar is grayed out

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

Style customization

You can customize the text using the pivot-text property and the color property to customize the progress bar color

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

Api

Props