Circle 环形进度条

介绍

圆环形的进度条组件，支持进度渐变动画。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {
  "van-circle": "@vant/weapp/circle/index"
}

代码演示

基础用法

value属性表示进度条的目标进度。

<van-circle value="{{ 30 }}" text="text" />

宽度定制

通过stroke-width属性来控制进度条宽度。

<van-circle value="{{ value }}" stroke-width="6" text="宽度定制" />

颜色定制

通过color属性来控制进度条颜色，layer-color属性来控制轨道颜色。

<van-circle
  value="{{ value }}"
  layer-color="#eeeeee"
  color="#ee0a24"
  text="颜色定制"
/>

渐变色

color属性支持传入对象格式来定义渐变色。

<van-circle value="{{ value }}" color="{{ gradientColor }}" text="渐变色" />

Page({
  data: {
    value: 25,
    gradientColor: {
      '0%': '#ffd01e',
      '100%': '#ee0a24',
    },
  },
});

逆时针方向

将clockwise设置为false，进度会从逆时针方向开始。

<van-circle
  value="{{ value }}"
  color="#07c160"
  clockwise="{{ false }}"
  text="逆时针"
/>

大小定制

通过size属性设置圆环直径。

<van-circle value="{{ value }}" size="120" text="大小定制" />

API

Props

Slots