vant/src/circle

Circle

Intro

Circular progress bar component, and supports gradient color animation.

Install

Register component globally via app.use, refer to Component Registration for more registration ways.

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

const app = createApp();
app.use(Circle);

Usage

Basic Usage

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

import { ref, computed } from 'vue';

export default {
  setup() {
    const currentRate = ref(0);
    const text = computed(() => currentRate.value.toFixed(0) + '%');

    return {
      text,
      currentRate,
    };
  },
};

Custom Width

<van-circle
  v-model:current-rate="currentRate"
  :rate="rate"
  :stroke-width="60"
  text="Custom Width"
/>

Custom Color

<van-circle
  v-model:current-rate="currentRate"
  :rate="rate"
  layer-color="#ebedf0"
  text="Custom Color"
/>

Gradient

<van-circle
  v-model:current-rate="currentRate"
  :rate="rate"
  :color="gradientColor"
  text="Gradient"
/>

import { ref } from 'vue';

export default {
  setup() {
    const currentRate = ref(0);
    const gradientColor = {
      '0%': '#3fecff',
      '100%': '#6149f6',
    };

    return {
      currentRate,
      gradientColor,
    };
  },
};

Counter Clockwise

<van-circle
  v-model:current-rate="currentRate"
  :rate="rate"
  :clockwise="false"
  text="Counter Clockwise"
/>

Custom Size

<van-circle
  v-model:current-rate="currentRate"
  :rate="rate"
  size="120px"
  text="Custom Size"
/>

API

Props

Attribute	Description	Type	Default
v-model:current-rate	Current rate	number	-
rate	Target rate	number | string	100
size	Circle size	number | string	100px
color	Progress color, passing object to render gradient	string | object	#1989fa
layer-color	Layer color	string	white
fill	Fill color	string	none
speed	Animate speed（rate/s）	number | string	0
text	Text	string	-
stroke-width	Stroke width	number | string	40
stroke-linecap	Stroke linecap，can be set to square butt	string	round
clockwise	Whether to be clockwise	boolean	true

Slots

Name	Description
default	custom text content

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-circle-size	100px	-
--van-circle-color	var(--van-primary-color)	-
--van-circle-layer-color	var(--van-white)	-
--van-circle-text-color	var(--van-text-color)	-
--van-circle-text-font-weight	var(--van-font-weight-bold)	-
--van-circle-text-font-size	var(--van-font-size-md)	-
--van-circle-text-line-height	var(--van-line-height-md)	-