https://github.com/anthinkingcoder/circle-progress
vue component of circle progress bar
https://github.com/anthinkingcoder/circle-progress
Last synced: 8 months ago
JSON representation
vue component of circle progress bar
- Host: GitHub
- URL: https://github.com/anthinkingcoder/circle-progress
- Owner: anthinkingcoder
- Created: 2018-09-11T01:16:03.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2018-09-11T03:56:19.000Z (about 7 years ago)
- Last Synced: 2025-02-06T20:44:29.206Z (10 months ago)
- Language: Vue
- Homepage:
- Size: 78.1 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-circle-progress
a vue component of circle progress bar
# install
```bash
$ npm i vue-circle-xprogress -s
```
# use npm
```js
import Vue from 'Vue'
import CircleProgress from 'vue-circle-xprogress'
import 'vue-circle-progress/dist/circle-progress.css'
Vue.use(CircleProgress)
```
# use cdn
```html
```
# live example
> [code open](https://codepen.io/zhoulin/pen/jvZeNy)
# start
```html
30
```
# circle-progress Component
### props
| param | description | type | default |
| :-: | :-: | :-: | :-: |
| percent | 进度百分比 0-100 | Number | 0 |
| size | 大小 | Number | 120 |
| staticWidth | 背景圆环 stroke 宽度 | String | 6 |
| staticColor | 背景圆环 颜色 | String | #E8EAED |
| dynamicWidth | 圆环 stroke 宽度 | Number | 7 |
| dynamicColor | 圆环 颜色 | String | #3864EC |
| dynamicShape | 圆环边角形状 ```round```,```square``` | String | round |
| dashboard | 仪表盘 | Boolean | false |