# Circle
### Install
```js
import Vue from 'vue';
import { Circle } from 'vant';
Vue.use(Circle);
```
## Usage
### Basic Usage
```html
```
```js
export default {
data() {
return {
currentRate: 0,
};
},
computed: {
text() {
return this.currentRate.toFixed(0) + '%';
},
},
};
```
### Custom Width
```html
```
### Custom Color
```html
```
### Gradient
```html
```
```js
export default {
data() {
return {
currentRate: 0,
gradientColor: {
'0%': '#3fecff',
'100%': '#6149f6',
},
};
},
};
```
### Counter Clockwise
```html
```
### Custom Size
```html
```
## API
### Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| v-model:currentRate | Current rate | _number_ | - |
| rate | Target rate | _number \| string_ | `100` |
| size | Circle size | _number \| string_ | `100px` |
| color `v2.1.4` | 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 `v2.2.15` | Stroke linecap,can be set to `sqaure` `butt` | _string_ | `round` |
| clockwise | Whether to be clockwise | _boolean_ | `true` |
### Slots
| Name | Description |
| ------- | ------------------- |
| default | custom text content |