Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

v circle

Vue: Step-By-Step Guide To Mastering Vue.js From Beginner To Advanced (Vue.js, Learning Vue js 2)

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

To build the examples locally, run:

npm install
npm run dev

Then open http://localhost:8080/examples/home.html in a browser.


The easiest way to use v-circle is to install it from NPM and include it in your own Vue build process using Webpack.

$ npm install v-circle


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.


.vue file usage

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

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

export default {
components: {
circleCss: CssCircle


  • CssCircles
  • SvgCircles
  • CanvasCircles

Github: http://github.com/qddegtya/v-circle#readme

← vuejs noty vue context menu →

© vuejsexamples.net - Privacy Policy - Cookie Policy