Responsive Circular Progressbar Component For Vue 3

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

See Also:

• 10 Best Progress Bar Components For Vue.js App

How to use it:

1. Import the vue3-m-circle-progress-bar component.

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

2. Basic usage.

<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'
},
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
}

Preview:

Changelog:

v0.6.0 (04/18/2023)

• Add new prop – reversedFilling

v0.5.0 (03/29/2023)

• Now you don’t need to include styles separately

Download Details:

Author: mkolsv

Live Demo: https://github.com/mkolsv/vue3-m-circle-progress-bar/blob/main/index.html

Download Link: https://github.com/mkolsv/vue3-m-circle-progress-bar/archive/refs/heads/main.zip

Official Website: https://github.com/mkolsv/vue3-m-circle-progress-bar

Install & Download:

# NPM
$ npm i vue3-m-circle-progress-bar