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: 2 days 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 (almost 2 years ago)
• Last Synced: 2024-11-01T20:47:42.757Z (14 days ago)
• Topics: javascript, vue
• Language: Vue
• Homepage: http://xiaoa.name/v-circle/
• Size: 18.6 KB
• Stars: 107
• Watchers: 4
• Forks: 30
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
v-circle

[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#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!