Circular Progressbar using Vue.js

Here is the Vue.js component to make Circular Progressbar

Circular Progressbar using Vue.js

Installation

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

$ 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

proptypedescriptionexampledefault value
colorStringcircle progress fill color#000000#2ecc71
widthNumbercircle size180150
fontSizeNumbercircle progress value size6464
pvNumbercircle progress value750
textColorStringcircle progress value color#bdc3c7#bdc3c7
boldStringcircle progress outline width105
textBgColorStringcircle progress value background-color#000000#f9f9f9
borderColorStringcircle progress outline color#000000#bdc3c7
duringNumbercircle progress animation dur-time20.8
bgColorStringcircle progress background-color#000000#f0f0f0
CssCircles

Leave a Comment