A collection of circle progress with Vue.js.
- Vue 1.0+ use
v-circle 0.1+
- Vue 2.0+ use
v-circle 0.2+
Demos & Examples
Live Demo: xiao.name/v-circle
To build the examples locally, run:
npm install
npm run dev
Then open http://localhost:8080/examples/home.html in a browser.
Installation
The easiest way to use v-circle
is to install it from NPM and include it in your own Vue build process (using Webpack, etc)
Build
build to dist
$ npm run build
You can also use the standalone build by including dist/v-circle.js
in your page. If you use this, make sure you have already included Vue, and it is available as a global variable.
Usage
.vue file usage
Circles
- CssCircles
- SvgCircles
- CanvasCircles
API
CssCircles
prop | type | description | example | default value |
---|---|---|---|---|
color | String | circle progress fill color | #000000 | #2ecc71 |
width | Number | circle size | 180 | 150 |
fontSize | Number | circle progress value size | 64 | 64 |
pv | Number | circle progress value | 75 | 0 |
textColor | String | circle progress value color | #bdc3c7 | #bdc3c7 |
bold | String | circle progress outline width | 10 | 5 |
textBgColor | String | circle progress value background-color | #000000 | #f9f9f9 |
borderColor | String | circle progress outline color | #000000 | #bdc3c7 |
during | Number | circle progress animation dur-time | 2 | 0.8 |