vue-doughnut-progress
v1.0.7
An animated responsive circular progress for Vue 3
0/weekUpdated 3 years agoMITUnpacked: 19.9 KB
Published by Bizhan Hejazi
npm install vue-doughnut-progress
vue-doughnut-progress
An animated responsive Circular Progress Bar for Vue 3
Demo
A demo of the package is available HERE
Getting started
1. Install it using npm:
``
npm i vue-doughnut-progress
2. Import it into your vue file:
import VueDoughnutProgress from 'vue-doughnut-progress';
3. Register it (Locally or Globally)
components: {
VueDoughnutProgress
}
4. Add it to your template with the properties:
thickness="5"
color="red"
percent="23"
:text="{
text:'text-align:center>Doughnut
Progress
',
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