Press "Enter" to skip to content

Circular Progress Bar Component-Based On Vue And Canvas

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

parameterinstructiontypeMust passOptional valueDefaults
percentagepercentageNumberfalse 0
start-youStarting angleNumberfalse 270
circle-radiusRadius of the ringNumberfalse 40
circle-widthLine width of the ringNumberfalse 2
circle-colorThe color of the ringStringfalse #e5e5e5
line-widthThe width of the progress arcNumberfalse 8
use-gradientWhether to use gradient color to draw the progress arcBooleanfalse false
line-color-stopsProgress arc gradient color breakpointArrayfalse [{“percent”:0,”color”:”#13CDE3″},{“percent”:1,”color”:”#3B77E3″}]
line-colorProgress arc colorStringfalse #3B77E3
show-textWhether to display the text in the ringBooleanfalse true
font-sizeFont size in ringNumberfalse 14
font-colorFont color in the ringStringfalse #444
formatText formatting methodFunctionfalse  
point-radiusDot radius, the value <=0, the dot will not be displayedNumberfalse 6
point-colorDot fill colorStringfalse #3B77E3
animatedWhether to use animation effectsBooleanfalse true
easingBessel easing function, the default is ease-in effectStringfalse 0.42,0,1,1
durationThe initial animation period, in secondsNumberfalse 1

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 Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *