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