Circle 环形进度条

介绍

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

引入

app.jsonindex.json中引入组件,详细介绍见快速上手

  1. "usingComponents": {
  2. "van-circle": "@vant/weapp/circle/index"
  3. }

代码演示

基础用法

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

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

宽度定制

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

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

颜色定制

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

  1. <van-circle
  2. value="{{ value }}"
  3. layer-color="#eeeeee"
  4. color="#ee0a24"
  5. text="颜色定制"
  6. />

渐变色

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

  1. <van-circle value="{{ value }}" color="{{ gradientColor }}" text="渐变色" />
  1. Page({
  2. data: {
  3. value: 25,
  4. gradientColor: {
  5. '0%': '#ffd01e',
  6. '100%': '#ee0a24',
  7. },
  8. },
  9. });

逆时针方向

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

  1. <van-circle
  2. value="{{ value }}"
  3. color="#07c160"
  4. clockwise="{{ false }}"
  5. text="逆时针"
  6. />

大小定制

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

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

API

Props

参数说明类型默认值版本
value目标进度number0-
type指定 canvas 类型,可选值为 2dstring--
size圆环直径,默认单位为 pxnumber100-
color进度条颜色,传入对象格式可以定义渐变色string | object#1989fa-
layer-color轨道颜色string#fff-
fill填充颜色string--
speed动画速度(单位为 value/s)number50-
text文字string--
stroke-width进度条宽度number4-
clockwise是否顺时针增加booleantrue-

Slots

名称说明
-自定义文字内容,如果设置了fill,插槽内容会被原生组件覆盖

Circle 环形进度条 - 图1