vue-doughnut-progress
An animated responsive circular progress for Vue 3
37,546
| Install | |
|---|---|
npm install vue-doughnut-progress |
|
| Latest Version: | 1.0.7 |
| Vue: | 3 |
| License: | MIT |
| Last Updated: | May 29, 2022 |
| Links: | npm |
Maintainer: bizhan.he1996
vue-doughnut-progress
An animated responsive Circular Progress Bar for Vue 3
Demo
A demo of the package is available HERE
Getting started
- Install it using npm:
npm i vue-doughnut-progress
- Import it into your vue file:
import VueDoughnutProgress from 'vue-doughnut-progress';
- Register it (Locally or Globally)
components: {
VueDoughnutProgress
}
- Add it to your template with the properties:
<VueDoughnutProgress
radius="50"
thickness="5"
color="red"
percent="23"
:text="{
text:'<p style=`text-align:center`>Doughnut<br/>Progress</p>',
bold: true,
size: 14
}"
/>
Properties
| name | type | map | description |
|---|---|---|---|
| radius | Integer | radius of the progress circle, no need to add px | |
| thickness | Integer | thickness of circle, no need to add px | |
| color | String | color of progress, could be a color name or a HEX color code | |
| percent | Integer | an integer ranging from 0 to 100, no need to add % | |
| text | Object | {text: String,bold: Boolean,size: Integer} | An object with properties about the text inside the progress circle text: the text inside the progress cirlce, could be simple string or HTML bold: whether the text inside the circle is bold or not, either true or false size: font-size of the text inside the circle, no need to add px |
Related Packages
Version History
| Version | Released | License |
|---|---|---|
| 1.0.7 | MIT | |
| 1.0.6 | MIT | |
| 1.0.5 | MIT | |
| 1.0.4 | ||
| 1.0.3 | ||
| 1.0.2 | ||
| 1.0.1 |