vue-doughnut-progress

1.0.7 • Public • Published

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
  1. Import it into your vue file:
import VueDoughnutProgress from 'vue-doughnut-progress';
  1. Register it (Locally or Globally)
components: {
    VueDoughnutProgress
}
  1. 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

Package Sidebar

Install

npm i vue-doughnut-progress

Weekly Downloads

1,123

Version

1.0.7

License

MIT

Unpacked Size

19.9 kB

Total Files

7

Last publish

Collaborators

  • bizhan.he1996