Press "Enter" to skip to content

A Collection Of Circle Progress Bars with Vue.js | v-circle

v-Circle is a multipurpose Vue.js component for displaying circular progress bars using SVG, canvas, or pure CSS.

vue progress bar, vue 3 circular progress bar, circular progressbar, vue progress circle, circular progress bar with percentage, dynamic progress bar in vue js, vue progress bar percentage


  • CssCircles
  • SvgCircles
  • CanvasCircles

How to make use of it:

Install & Download:

$ npm install v-circle


<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



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

circle progressbar component for vue js, v-circle Plugin/Github

See Demo And Download

Official Website(qddegtya): Click Here

This superior jQuery/javascript plugin is developed by qddegtya. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.