Vue awesome progress is a progress bar collection that supports npm and scripts used in two ways, and many self-supporting and animation properties are defined as the following offerings.

circular progress bar with percentage, circular progress indicator flutter, circular progress indicator flutter on button click, vue js circle progress bar, dynamic progress bar in vue js

How to make use of it:

Install and download:

# NPM
$ npm i vue-awesome-progress

1. Import and register the component.

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

2. Add a cool 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. Component props available.

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
}

Supported component properties

Canvas Based Circle Progress Indicator, vue awesome progress Plugin/Github, flutter circular progress indicator with percentage

See Demo And Download

Official Website(cumt-robin): Click Here

This superior jQuery/javascript plugin is developed by cumt-robin. For extra Advanced usage, please go to the official website.