Radial Progressbar Component For Vue JS

Install & Download:

npm install vue-radial-progress

Description:

A Vue JS component to generate an animated radial (rounded) SVG progress bar for your web applications.

Features:

Custom steps.
Custom colors.
Configurable animations.

How to use it:

1. Import and register the radial progress component.

import RadialProgressBar from 'vue-radial-progress'

export default {
  components: {
    RadialProgressBar
  }
}

2. Generate 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. 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
}