SVG Circle Progress Component For Vue 3

Install & Download:

# Yarn
$ yarn add vue3-circle-progress
# NPM
$ npm i vue3-circle-progress

Description:

A lightweight yet high customizable circle progress bar component for Vue 3.

How to use it:

1. Import and register the circle progress component.

import "vue3-circle-progress/dist/circle-progress.css";
import CircleProgress from "vue3-circle-progress";

export default {
  components: {CircleProgress}
}

2. Add the circle-progress component to the app and specify the percent as follows:

<circle-progress :percent="50" />

3. Customize the circle progress using the following props & options.

size: {
  type: Number,
  default: 180
},
borderWidth: {
  type: Number,
  default: 15
},
borderBgWidth: {
  type: Number,
  default: 15
},
fillColor: {
  type: String,
  default: "#288feb"
},
emptyColor: {
  type: String,
  default: "#dddddd"
},
background: {
  type: String,
  default: "none"
},
className: {
  type: String,
  default: ""
},
percent: {
  type: Number,
  default: 50
},
linecap: {
  type: String,
  default: "round"
},
transition: {
  type: Number,
  default: 400
},
isGradient: {
  type: Boolean,
  default: false
},
/* 
  angle: 0,
  startColor: '#ff0000',
  stopColor: '#ffff00'
*/
gradient: {
  type: Object,
  default: () => GRADIENT
},
isShadow: {
  type: Boolean,
  default: false
},
/* 
  inset: false,
  vertical: 3,
  horizontal: 0,
  blur: 0,
  opacity: .4,
  color: '#000000'
*/
shadow: {
  type: Object,
  default: () => SHADOW
},
isBgShadow: {
  type: Boolean,
  default: false
},
bgShadow: {
  type: Object,
  default: () => BG_SHADOW
},
viewport: {
  type: Boolean,
  default: false
},
onViewport: {
  type: Function
},
class: {
  type: String,
  default: ""
},
showPercent: {
  type: Boolean,
  default: false
}