Vant Circle ring progress bar

Introduced

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

Vue.use(Circle);

Code demo

Basic usage

The rate property represents the target progress of the progress bar, and v-model represents the real-time progress during the animation. When the rate changes, the v-model changes at the speed of the speed of the rate until the rate-set value is reached.

<van-circle
  v-model="currentRate"
  :rate="30"
  :speed="100"
  :text="text"
/>

export default {
  data() {
    return {
      currentRate: 0
    };
  },
  computed: {
    text() {
      return this.currentRate.toFixed(0) + '%'
    }
  }
};

Width customization

The width of the progress bar is controlled by thestroke-width property

<van-circle
  v-model="currentRate"
  :rate="rate"
  :stroke-width="60"
  text="宽度定制"
/>

Color customization

The color bar color is controlled by the color property, and the layer-color property is used to control the track color

<van-circle
  v-model="currentRate"
  :rate="rate"
  layer-color="#ebedf0"
  text="颜色定制"
/>

Gradient color

The color property supports the incoming object format to define the gradient color

<van-circle
  v-model="currentRate"
  :rate="rate"
  :color="gradientColor"
  text="渐变色"
/>

export default {
  data() {
    return {
      currentRate: 0,
      gradientColor: {
        '0%': '#3fecff',
        '100%': '#6149f6'
      }
    };
  }
};

Counterclockwise

Set lockwise to false, and progress starts counterclockwise

<van-circle
  v-model="currentRate"
  :rate="rate"
  :clockwise="false"
  text="逆时针方向"
/>

Size customization

Set the ring diameter with the size property

<van-circle
  v-model="currentRate"
  :rate="rate"
  size="120px"
  text="大小定制"
/>

Api

Props

Slots