Highly customizable & lightweight & responsive circular progress bar component for Vue 3, built with SVG and extensively customizable.
Welcome to MCircleProgressBar!
Hi!
Highly customizable & lightweight & responsive circular progressbar component for Vue 3, built with SVG and extensively customizable.
DEPRECATED!!! USE INSTEAD A NEW PACKAGE - https://www.npmjs.com/package/circle-progress.vue
Installation
npm install --save vue3-m-circle-progress-bar
Adding into app
import { CircleProgressBar } from 'vue3-m-circle-progress-bar';
<CircleProgressBar :value="7" :max="10" />
Props
Please write me, if you need more props 😃
You can customize your progress bars as you want. For example:
| Props | Type | HTML |
|---|---|---|
| max* | Number |
Max value |
| value* | Number |
Current value. |
| colorFilled | String |
Circle color if limit exceed |
| colorUnfilled | String |
Circle color if limit not exceed |
| percentage | BooleaN |
Show percentage |
| rounded | BooleaN |
Rounding the circle line |
| animationDuration | String |
Animation Duration |
| strokeWidth | String |
Circle Stroke width |
| reversedFilling | Boolean |
Enable reversed filling |
Other
Also you can use slots to throw your custom content. For example:
<CircleProgressBar
:value="value"
:max="max"
percentage
rounded>
{{ value }} / {{ max }}
</CircleProgressBar>