Circular progress bar component, and supports gradient color animation.
\nRegister component globally via app.use, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Circle } from 'vant';\n\nconst app = createApp();\napp.use(Circle);\n<van-circle\n v-model:current-rate="currentRate"\n :rate="30"\n :speed="100"\n :text="text"\n/>\nimport { ref, computed } from 'vue';\n\nexport default {\n setup() {\n const currentRate = ref(0);\n const text = computed(() => currentRate.value.toFixed(0) + '%');\n\n return {\n text,\n currentRate,\n };\n },\n};\nThe width of the progress bar is controlled by the stroke-width prop, stroke-width refers to the width of path in SVG, and the default value is 40.
<van-circle\n v-model:current-rate="currentRate"\n :rate="rate"\n :stroke-width="60"\n text="Custom Width"\n/>\nThe unit of stroke-width is not px, if you want to know the relationship between stroke-width and px, you can use the following formula to calculate:
// viewBox size for SVG\nconst viewBox = 1000 + strokeWidth;\n\n// The width of the Circle component, the default is 100px\nconst circleWidth = 100;\n\n// Final rendered progress bar width (px)\nconst pxWidth = (strokeWidth * circleWidth) / viewBox;\n<van-circle\n v-model:current-rate="currentRate"\n :rate="rate"\n layer-color="#ebedf0"\n text="Custom Color"\n/>\n<van-circle\n v-model:current-rate="currentRate"\n :rate="rate"\n :color="gradientColor"\n text="Gradient"\n/>\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentRate = ref(0);\n const gradientColor = {\n '0%': '#3fecff',\n '100%': '#6149f6',\n };\n\n return {\n currentRate,\n gradientColor,\n };\n },\n};\n<van-circle\n v-model:current-rate="currentRate"\n :rate="rate"\n :clockwise="false"\n text="Counter Clockwise"\n/>\n<van-circle\n v-model:current-rate="currentRate"\n :rate="rate"\n size="120px"\n text="Custom Size"\n/>\n<van-circle\n v-model:current-rate="currentRate"\n :rate="rate"\n text="Left"\n start-position="left"\n/>\n<van-circle\n v-model:current-rate="currentRate"\n :rate="rate"\n text="Right"\n start-position="right"\n/>\n<van-circle\n v-model:current-rate="currentRate"\n :rate="rate"\n text="Bottom"\n start-position="bottom"\n/>\n| Attribute | \nDescription | \nType | \nDefault | \n
|---|---|---|---|
| v-model:current-rate | \nCurrent rate | \nnumber | \n- | \n
| rate | \nTarget rate | \nnumber | string | \n100 | \n
| size | \nCircle size | \nnumber | string | \n100px | \n
| color | \nProgress color, passing object to render gradient | \nstring | object | \n#1989fa | \n
| layer-color | \nLayer color | \nstring | \nwhite | \n
| fill | \nFill color | \nstring | \nnone | \n
| speed | \nAnimate speed\uFF08rate/s\uFF09 | \nnumber | string | \n0 | \n
| text | \nText | \nstring | \n- | \n
| stroke-width | \nStroke width | \nnumber | string | \n40 | \n
| stroke-linecap | \nStroke linecap, can be set to square butt | \nstring | \nround | \n
| clockwise | \nWhether to be clockwise | \nboolean | \ntrue | \n
| start-position | \nProgress start position, can be set to left\u3001right\u3001bottom | \nCircleStartPosition | \ntop | \n
| Name | \nDescription | \n
|---|---|
| default | \ncustom text content | \n
The component exports the following type definitions:
\nimport type { CircleProps, CircleStartPosition } from 'vant';\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\n| Name | \nDefault Value | \nDescription | \n
|---|---|---|
| --van-circle-size | \n100px | \n- | \n
| --van-circle-color | \nvar(--van-primary-color) | \n- | \n
| --van-circle-layer-color | \nvar(--van-white) | \n- | \n
| --van-circle-text-color | \nvar(--van-text-color) | \n- | \n
| --van-circle-text-font-weight | \nvar(--van-font-bold) | \n- | \n
| --van-circle-text-font-size | \nvar(--van-font-size-md) | \n- | \n
| --van-circle-text-line-height | \nvar(--van-line-height-md) | \n- | \n