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:

<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 |