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:

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

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