# Circle 环形进度条

### 引入

在`index.config.js中引入组件

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

## 代码演示

### 基础用法

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

```html
<van-circle size={100} strokeWidth={4} color={'#dc1e32'} value={25} text={'25%'}/>
```

### 宽度定制

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

```html
<van-circle value={25} strokeWidth={6} size={100} color={'#1989fa'} text="宽度定制"/>
```

### 颜色定制

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

```html
<van-circle value={25}
            strokeWidth={4}
            size={100}
            layerColor="#eee"
            color="#ee0a24"
            text="颜色定制"/>
```

### 渐变色

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

```html
<van-circle value={this.state.value} strokeWidth={4} size={100} color={this.state.gradientColor} text="渐变色"/>
```

```javascript

  state = {
    value: 25,
    gradientColor: {
      '0%': '#ffd01e',
      '100%': '#ee0a24',
    },
  };

```

### 逆时针方向

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

```html
<van-circle value={this.state.value}
            strokeWidth={4}
            size={100}
            color="#07c160"
            clockwise={false}
            text="逆时针"/>
```

### 大小定制

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

```html
<van-circle value={this.state.value} strokeWidth={4} size="120" color={'#1989fa'} text="大小定制"/>
```

## API
### 注:属性应用在组件上需要统一使用驼峰式命名，如custom-class应变为
```html
<van-button type="primary" customClass='myClass' size="large">大号按钮</van-button>
```
### 注:事件应用在组件上需要统一使用驼峰式命名，如bind:click/bind:search/bind:before-enter应变为
```html
<van-button type="primary" onClick={()=>this.onClick()}>大号按钮</van-button>
<van-search type="primary" onSearch={()=>this.onSearch()}>大号按钮</van-search>
<van-transition type="primary" onBeforeEnter={()=>this.onBeforeEnter()}>大号按钮</van-transition>
```
### Props

| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| value | 目标进度 | _number_ | `0` | - |
| type | 指定 canvas 类型，可选值为 `2d` | _string_ | - | - |
| size | 圆环直径，默认单位为 `px` | _number_ | `100` | - |
| color | 进度条颜色，传入对象格式可以定义渐变色 | _string \| object_ | `#1989fa` | - |
| layer-color | 轨道颜色 | _string_ | `#fff` | - |
| fill | 填充颜色 | _string_ | - | - |
| speed | 动画速度（单位为 value/s） | _number_ | `50` | - |
| text | 文字 | _string_ | - | - |
| stroke-width | 进度条宽度 | _number_ | `4` | - |
| clockwise | 是否顺时针增加 | _boolean_ | `true` | - |

### Slots

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