Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/qddegtya/v-circle
:doughnut: A collection of circle progress with Vue.js
https://github.com/qddegtya/v-circle
javascript vue
Last synced: about 2 months ago
JSON representation
:doughnut: A collection of circle progress with Vue.js
- Host: GitHub
- URL: https://github.com/qddegtya/v-circle
- Owner: qddegtya
- License: mit
- Created: 2016-04-26T03:28:50.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-02-14T03:08:40.000Z (over 1 year ago)
- Last Synced: 2024-07-20T19:22:57.116Z (2 months ago)
- Topics: javascript, vue
- Language: Vue
- Homepage: http://xiaoa.name/v-circle/
- Size: 18.6 KB
- Stars: 108
- Watchers: 4
- Forks: 30
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
v-circle
[](#contributors)
======
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: [xiaoa.name/v-circle](http://xiaoa.name/v-circle/)
To build the examples locally, run:
```
npm install
npm run dev
```
Then open [http://localhost:8080/examples/home.html](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](http://webpack.github.io/), etc)
```
$ npm install v-circle
```
## 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
```
import CssCircle from 'v-circle/components/css-circle.vue'
export default {
components: {
circleCss: CssCircle
}
}
```
## 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 |
| bgColor | String | circle progress background-color | #000000 | #f0f0f0 |
## Contributors
Thanks goes to these wonderful people ([emoji key](https://github.com/all-contributors/all-contributors#emoji-key)):
| [
Archer (炽宇)](http://xiaoa.name)
[💻](https://github.com/qddegtya/v-circle/commits?author=qddegtya "Code") [🚇](#infra-qddegtya "Infrastructure (Hosting, Build-Tools, etc)") [🚧](#maintenance-qddegtya "Maintenance") |
| :---: |
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!