Radial Progress Bar Component for Vue.js

vue-radial-progress is a component of the Vue.js radial progress bar. Uses SVG and JavaScript to radially move the progress bar in a gradient.

dynamic radial progress bar in vue js, vue steps progress bar, circular progress bar in vue, radial progress bar, circular steps progressbar, circular progress bar with percentage

Responsive and Lightweight Radial Linear Progress Bar Component For Angular

How to make use of it:

Install and download:

npm install vue-radial-progress

1. Import and record the radial progression component.

import RadialProgressBar from 'vue-radial-progress'

export default {
  components: {
    RadialProgressBar
  }
}

2. Create a basic radial progress bar.

<template>
  <radial-progress-bar 
    :diameter="200"
    :completed-steps="completedSteps"
    :total-steps="totalSteps">
   <p>Total steps: {{ totalSteps }}</p>
   <p>Completed steps: {{ completedSteps }}</p>
  </radial-progress-bar>
</template>

export default {
  components: {
    RadialProgressBar
  },
  data () {
    return {
      completedSteps: 0,
      totalSteps: 10
    }
  },
}

3. The default component props.

diameter: {
  type: Number,
  required: false,
  default: 200
},
totalSteps: {
  type: Number,
  required: true,
  default: 10
},
completedSteps: {
  type: Number,
  required: true,
  default: 0
},
startColor: {
  type: String,
  required: false,
  default: '#bbff42'
},
stopColor: {
  type: String,
  required: false,
  default: '#429321'
},
strokeWidth: {
  type: Number,
  required: false,
  default: 10
},
innerStrokeWidth: {
  type: Number,
  required: false,
  default: 10
},
strokeLinecap: {
  type: String,
  required: false,
  default: 'round'
},
animateSpeed: {
  type: Number,
  required: false,
  default: 1000
},
innerStrokeColor: {
  type: String,
  required: false,
  default: '#323232'
},
fps: {
  type: Number,
  required: false,
  default: 60
},
timingFunc: {
  type: String,
  required: false,
  default: 'linear'
},
isClockwise: {
  type: Boolean,
  required: false,
  default: true
}

Radial Progressbar Component, vue-radial-progress Plugin/Github