[new feature] add Circle component (#608)

docs/markdown/en-US/circle.md

@@ -0,0 +1,69 @@
+## Circle
+
+### Install
+``` javascript
+import { Circle } from 'vant';
+
+Vue.use(Circle);
+```
+
+### Usage
+
+#### Basic Usage
+
+```html
+<van-circle
+  v-model="currentRate"
+  :rate="30"
+  :speed="100"
+  :text="text"
+/>
+```
+
+``` javascript
+export default {
+  data() {
+    return {
+      currentRate: 0
+    };
+  },
+  computed: {
+    text() {
+      return this.currentRate.toFixed(0) + '%'
+    }
+  }
+};
+```
+
+#### Custom style
+
+```html
+<van-circle
+  v-model="currentRate"
+  color="#13ce66"
+  fill="#fff"
+  size="120px"
+  layer-color="#eee"
+  :text="text"
+  :rate="rate"
+  :speed="100"
+  :clockwise="false"
+  :stroke-width="60"
+/>
+```
+
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| v-model | Current rate | `Number` | - | - |
+| rate | Target rate | `Number` | `100` | - |
+| size | Circle size | `String` | `100px` | - |
+| color | Progress bar color | `String` | `#38f` | - |
+| layer-color | Layer color | `String` | `#fff` | - |
+| fill | Fill color | `String` | `none` | - |
+| speed | Animate speed（rate/s）| `Number` | - | - |
+| text | Text | `String` | - | - |
+| stroke-width | Stroke width | `Number` | `40` | - |
+| clockwise | Is clockwise | `Boolean` | `true` | - |

docs/markdown/index.js

@@ -25,6 +25,7 @@ export default {
   'zh-CN/changelog-generated': wrapper(r => require.ensure([], () => r(require('./zh-CN/changelog-generated.md')), 'zh-CN/changelog-generated')),
   'zh-CN/changelog': wrapper(r => require.ensure([], () => r(require('./zh-CN/changelog.md')), 'zh-CN/changelog')),
   'zh-CN/checkbox': wrapper(r => require.ensure([], () => r(require('./zh-CN/checkbox.md')), 'zh-CN/checkbox')),
+  'zh-CN/circle': wrapper(r => require.ensure([], () => r(require('./zh-CN/circle.md')), 'zh-CN/circle')),
   'zh-CN/contact': wrapper(r => require.ensure([], () => r(require('./zh-CN/contact.md')), 'zh-CN/contact')),
   'zh-CN/coupon': wrapper(r => require.ensure([], () => r(require('./zh-CN/coupon.md')), 'zh-CN/coupon')),
   'zh-CN/datetime-picker': wrapper(r => require.ensure([], () => r(require('./zh-CN/datetime-picker.md')), 'zh-CN/datetime-picker')),
@@ -77,6 +78,7 @@ export default {
   'en-US/cell': wrapper(r => require.ensure([], () => r(require('./en-US/cell.md')), 'en-US/cell')),
   'en-US/changelog': wrapper(r => require.ensure([], () => r(require('./en-US/changelog.md')), 'en-US/changelog')),
   'en-US/checkbox': wrapper(r => require.ensure([], () => r(require('./en-US/checkbox.md')), 'en-US/checkbox')),
+  'en-US/circle': wrapper(r => require.ensure([], () => r(require('./en-US/circle.md')), 'en-US/circle')),
   'en-US/contact': wrapper(r => require.ensure([], () => r(require('./en-US/contact.md')), 'en-US/contact')),
   'en-US/coupon': wrapper(r => require.ensure([], () => r(require('./en-US/coupon.md')), 'en-US/coupon')),
   'en-US/datetime-picker': wrapper(r => require.ensure([], () => r(require('./en-US/datetime-picker.md')), 'en-US/datetime-picker')),

docs/markdown/zh-CN/circle.md

@@ -0,0 +1,70 @@
+## Circle 环形进度条
+
+### 使用指南
+``` javascript
+import { Circle } from 'vant';
+
+Vue.use(Circle);
+```
+
+### 代码演示
+
+#### 基础用法
+通过 `rate` 指定目标进度，`v-model` 代表当前进度，`speed` 控制动画速度
+
+```html
+<van-circle
+  v-model="currentRate"
+  :rate="30"
+  :speed="100"
+  :text="text"
+/>
+```
+
+``` javascript
+export default {
+  data() {
+    return {
+      currentRate: 0
+    };
+  },
+  computed: {
+    text() {
+      return this.currentRate.toFixed(0) + '%'
+    }
+  }
+};
+```
+
+#### 样式定制
+
+```html
+<van-circle
+  v-model="currentRate"
+  color="#13ce66"
+  fill="#fff"
+  size="120px"
+  layer-color="#eee"
+  :text="text"
+  :rate="rate"
+  :speed="100"
+  :clockwise="false"
+  :stroke-width="60"
+/>
+```
+
+
+### API
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+|-----------|-----------|-----------|-------------|-------------|
+| v-model | 当前进度 | `Number` | - | - |
+| rate | 目标进度 | `Number` | `100` | - |
+| size | 圆环直径 | `String` | `100px` | - |
+| color | 进度条颜色 | `String` | `#38f` | - |
+| layer-color | 轨道颜色 | `String` | `#fff` | - |
+| fill | 填充颜色 | `String` | `none` | - |
+| speed | 动画速度（单位为 rate/s）| `Number` | - | - |
+| text | 文字 | `String` | - | - |
+| stroke-width | 进度条宽度 | `Number` | `40` | - |
+| clockwise | 是否顺时针增加 | `Boolean` | `true` | - |