Canvas Based Circle Progress Indicator - vue-awesome-progress

Install & Download:

# NPM
$ npm i vue-awesome-progress

Description:

vue-awesome-progress is a simple, powerful, canvas-based circular progress indicator component for Vue.

How to use it:

1. Import and register the component.

import VueAwesomeProgress from "vue-awesome-progress"
// global
Vue.use(VueAwesomeProgress)
// local
export default {
  components: {
    VueAwesomeProgress
  },
  // ...
}

2. Add an awesome progress component to the template.

<vue-awesome-progress
  circle-color="#e5e9f2"
  :circle-width="4"
  :line-width="4"
  :duration="2"
  :start-deg="0"
  :percentage="100"
  :show-text="false"
  easing="0,0,1,1"
/>

3. Available component props.

startDeg: {
  type: Number,
  default: 270,
  validator: function(value) {
      return value >= 0 && value < 360
  }
},
percentage: {
  type: Number,
  default: 0,
  validator: function(value) {
      return value >= 0 && value <= 100
  }
},
circleRadius: {
  type: Number,
  default: 40
},
circleWidth: {
  type: Number,
  default: 2
},
circleColor: {
  type: String,
  default: '#e5e5e5'
},
lineWidth: {
  type: Number,
  default: 8
},
useGradient: {
  type: Boolean,
  default: false
},
lineColor: {
  type: String,
  default: '#3B77E3'
},
lineColorStops: {
  type: Array,
  default: function() {
      return [
          { percent: 0, color: '#13CDE3' },
          { percent: 1, color: '#3B77E3' }
      ]
  }
},
showText: {
  type: Boolean,
  default: true
},
fontSize: {
  type: Number,
  default: 14
},
fontColor: {
  type: String,
  default: '#444'
},
pointRadius: {
  type: Number,
  default: 6
},
pointColor: {
  type: String,
  default: '#3B77E3'
},
animated: {
  type: Boolean,
  default: true
},
easing: {
  type: String,
  // ease-in
  default: '0.42,0,1,1',
  validator: function(value) {
      return /^(\-?\d+(\.\d+)?,){3}\-?\d+(\.\d+)?$/.test(value)
  }
},
duration: {
  type: Number,
  default: 0.6
},
format: {
  type: Function
}