🎉 vue-progress-circle-svg 🎉

A simple progress circle svg component made with Vue.js 2.

---

👩🏻‍💻👨🏻‍💻 Installation

The module is published on npmjs.org.

 
# 1.
# cd your-project-folder

# 2.
npm i vue-progress-circle-svg

---

Usage

As component

 
// In a .vue file
import progressCircle from 'vue-progress-circle-svg/dist/progress-circle.esm';

export default {
  components: {
    progressCircle,
  },
};

Other usages (Coming soon!):

• Global component + Install;
• As a global plugin;
• Dirctly inside your browser;

---

Props

Attribute	Type	Default value	About
value	Number	0	@model The value for current progress
size	Number	24	Sets the diameter of the progress circle in pixels
startAngle	Number	0	Sets the starting sector angle, in radians
minValue	Number	0	Sets the minimum value needed to normalize the value range
maxValue	Number	100	Sets the maximum value needed to normalize the value range
svgClassName	String	''	Sets the svg root tag class name
sectorClassName	String	''	Sets the sector class name
sectorFill	String	'#5B85AA'	Sets the sector fill
sectorStroke	String	'none'	Sets the sector stroke
sectorFillRule	String	'evenodd'	Sets the sector fill rule
borderClassName	String	''	Sets the border class name
borderFill	String	'none'	Sets the sector fill
borderStroke	String	'#414770'	Sets the border stroke
svgCustomProps	Object	() => {}	Binds every property of the passed Object as props/attributes of the svg component
sectorCustomProps	Object	() => {}	Binds every property of the passed Object as props/attributes of the sector path tag
circleCustomProps	Object	() => {}	Binds every property of the passed Object as props/attributes of the circle tag

---

🐞 Issues / 📝 Discussions / 👥 Contribution

This is my first package, and a first step to the OSS world.

Feel free to open issues, make suggest stuff opening a discussion or Contribute.

Thanks for using this component 💘.

---

🆓 License

MIT License // Copyright (©) 2021-now Gianluca Bianco