🍩 A collection of circle progress with Vue.js.
Clone or download
Latest commit 857bcf3 Jul 7, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
components style type scss Dec 12, 2017
examples 😄 first push Apr 26, 2016
.eslintrc 😄 first push Apr 26, 2016
.gitignore [doc] add dist gitignore Apr 26, 2016
README.md [doc] fix md Apr 28, 2016
app.vue [doc] fix to import Apr 28, 2016
index.js 😄 first push Apr 26, 2016
package.json [fix] ie Apr 28, 2016
webpack.config.js 😄 first push Apr 26, 2016

README.md

v-circle

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

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)

$ 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

<template>
<circle-css color="#3498db" width=120 font-size=48 pv=12 bold=8 text-bg-color='#f0f0f0'></circle-css>
</template>

<script>
import CssCircle from 'v-circle/components/css-circle.vue'

export default {
  components: {
    circleCss: CssCircle
  }
}
</script>

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