Responsive Circular Progressbar Component For Vue 3

Install & Download:

# NPM
$ npm i circle-progress.vue

Description:

A lightweight Vue 3 component for creating responsive, customizable, animated, circular progress bars with ease.

How to use it:

1. Import the CircleProgressBarr component.

import CircleProgressBar from 'vue3-m-circle-progress-bar';

2. Basic usage.

<CircleProgressBar  
  :value="10"  
  :max="100"  
  percentage  
 rounded>
{{ value }} / {{ max }}
</CircleProgressBar>

3. Available component props.

max: {
    type: Number,
    required: true
},
value: {
    type: Number,
    required: true
},
colorFilled: {
    type: String,
    required: false,
    default: '#FF5533'
},
colorUnfilled: {
    type: String,
    required: false,
    default: '#3BB44A'
},
colorBack: {
    type: String,
    required: false,
    default: '#ECEEF1'
},
percentage: {
    type: Boolean,
    required: false,
    default: false
},
rounded: {
    type: Boolean,
    required: false,
    default: false
},
animationDuration: {
    type: String,
    required: false,
    default: '0.5s'
},
strokeWidth: {
    type: String,
    required: false,
    default: '5px'
},
reversedFilling: {
    type: Boolean,
    required: false,
    default: false
},
size: {
    type: [String, Number],
    required: false,
    default: '124'
}