Press "Enter" to skip to content

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


See Demo And Download

Official Website(wyzantinc): Click Here

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

Be First to Comment

    Leave a Reply

    Your email address will not be published.