import{o as t,a,y as e}from"./vue-libs.b44bc779.js";const n={class:"van-doc-markdown-body"},r=e(`

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

AttributeDescriptionTypeDefault
percentagePercentagenumber | string0
stroke-widthStroke widthnumber | string4px
colorColorstring#1989fa
track-colorTrack colorstring#e5e5e5
pivot-textPivot textstringpercentage
pivot-colorPivot text background colorstringinherit progress color
text-colorPivot text colorstringwhite
inactiveWhether to be graybooleanfalse
show-pivotWhether to show textbooleantrue

Types

The component exports the following type definitions:

import type { ProgressProps, ProgressInstance } from 'vant';

ProgressInstance is the type of component instance:

import { ref } from 'vue';
import type { ProgressInstance } from 'vant';

const progressRef = ref<ProgressInstance>();

progressRef.value?.resize();

Theming

CSS Variables

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

NameDefault ValueDescription
--van-progress-height4px-
--van-progress-colorvar(--van-primary-color)-
--van-progress-inactive-colorvar(--van-gray-5)-
--van-progress-background-colorvar(--van-gray-3)-
--van-progress-pivot-padding0 5px-
--van-progress-pivot-text-colorvar(--van-white)-
--van-progress-pivot-font-sizevar(--van-font-size-xs)-
--van-progress-pivot-line-height1.6-
--van-progress-pivot-background-colorvar(--van-primary-color)-
`,13),o=[r],h={__name:"README",setup(d,{expose:s}){return s({frontmatter:{}}),(l,c)=>(t(),a("div",n,o))}};export{h as default};